LineSeries Multiple Date Axes breaks the DateAxis (Amcharts 4 )

Question

I am trying to make a multiple date axis graph in AmCharts 4 I have two inputs from two temperature sensors. The dateAxis is cutted at some value and the values are not properly set.

Any ideas please on what's wrong ?

Here is the graph from first temperature sensor chart from sensor 1

2.The graph from second temperature sensor chart from sensor 2

3.The resulting image of both sensors: chart from both sensors

4.Here is the code:

` chart.data = chartData;

        if (chart.data[0]) {
            seriesArray = Object.keys(chart.data[0]);
            // TODO: only for occurDate
            seriesArray.splice(0, 1);
        }

        // Create axes
        var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.renderer.grid.template.location = 0;
        dateAxis.renderer.minGridDistance = 50;
        dateAxis.baseInterval = {
        "timeUnit": "day",
        "count": 1
        };
        dateAxis.skipEmptyPeriods = true;

        // Create value axis
        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                         
        for(let i=0;i<seriesArray.length;i++){

            // Create series  
            var series = chart.series.push(new am4charts.LineSeries());
            series.dataFields.valueY = seriesArray[i]; 
            series.dataFields.dateX = "date";                    
            series.strokeWidth = 2;
            series.tensionX = 0.90;
            series.name = seriesArray[i];

            var bullet = series.bullets.push(new am4charts.Bullet());
            bullet.tooltipText = seriesArray[i] + ": {valueY}" + unit;

            bullet.adapter.add("fill", function(fill, target){
                if(target.dataItem.valueY < 21){
                    return am4core.color("#D66D6D");
                }
                return fill;
            })

            var range = valueAxis.createSeriesRange(series);
            range.value = goodRange.min;
            range.endValue = 0;
            range.contents.stroke = am4core.color("#D66D6D");
            range.contents.fill = range.contents.stroke;
            range.axisFill.fill = am4core.color("#cccccc");
            range.axisFill.fillOpacity = 0.2;
            range.grid.strokeOpacity = 0;

            var range2 = valueAxis.createSeriesRange(series);
            range2.value = 1000000;
            range2.endValue = goodRange.max;
            range2.contents.stroke = am4core.color("#D66D6D");
            range2.contents.fill = range.contents.stroke;
            range2.axisFill.fill = am4core.color("#cccccc");
            range2.axisFill.fillOpacity = 0.2;
            range2.grid.strokeOpacity = 0;

        }

        // Add scrollbar
        var scrollbarX = new am4charts.XYChartScrollbar();
        scrollbarX.series.push(series);
        chart.scrollbarX = scrollbarX;
        chart.cursor = new am4charts.XYCursor();
        chart.legend = new am4charts.Legend();
        chart.legend.position = "bottom";
        chart.legend.scrollable = true;
    }`

LineSeries Multiple Date Axes breaks the DateAxis (Amcharts 4 )

0 Answers0