I have a chart in React with 3 Line series. They appear perfectly but when I zoom in, the lines disappear. What is even stranger is that when I put my cursor in the chart I can see that the points still exists. They are just not visible.
I used AM Charts demo to create my chart. Here is my code:
useLayoutEffect(() => {
let chart = am4core.create("chartdiv",am4charts.XYChart);
// Increase contrast by taking evey second color
chart.colors.step = 2;
chart.paddingRight = 1;
chart.dateFormatter.inputDateFormat = "dd-MM-yyyy H:m:s";
chart.dateFormatter.dateFormat = "d-M H:m:s";
chart.data = props.data;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
if (chart.data.length > 289) dateAxis.groupData = true;
/**
* Creation of custom y axis
*/
let myAxis = chart.yAxes.push(new am4charts.ValueAxis());
myAxis.renderer.opposite = true;
myAxis.baseValue = 0;
myAxis.min = -100;
myAxis.max = 100;
myAxis.strictMinMax = false;
myAxis.numberFormatter = new am4core.NumberFormatter();
myAxis.minWidth = 60;
myAxis.numberFormatter.numberFormat = "#' %'";
myAxis.layout = "absolute";
myAxis.title.text = "TITLE";
myAxis.title.align = "left";
myAxis.title.valign = "top";
myAxis.title.rotation = 0;
myAxis.title.dy = -30;
myAxis.title.fontWeight = 600;
myAxis.renderer.line.strokeOpacity = 1;
myAxis.renderer.line.strokeWidth = 2;
myAxis.renderer.line.stroke = series.stroke;
myAxis.renderer.opposite = opposite;
function createMySeries(field,name,opposite,bullet) {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.yAxis = myAxis;
series.name = name;
series.tooltipText = "{name}: [bold]{valueY}%[/]";
series.tensionX = 0.8;
series.showOnInit = true;
var interfaceColors = new am4core.InterfaceColorSet();
switch (bullet) {
case "triangle":
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.width = 12;
bullet.height = 12;
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "middle";
var triangle = bullet.createChild(am4core.Triangle);
triangle.stroke = interfaceColors.getFor("background");
triangle.strokeWidth = 2;
triangle.direction = "top";
triangle.width = 12;
triangle.height = 12;
break;
case "rectangle":
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.width = 10;
bullet.height = 10;
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "middle";
var rectangle = bullet.createChild(am4core.Rectangle);
rectangle.stroke = interfaceColors.getFor("background");
rectangle.strokeWidth = 2;
rectangle.width = 6;
rectangle.height = 12;
break;
default:
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = interfaceColors.getFor("background");
bullet.circle.strokeWidth = 2;
break;
}
myAxis.renderer.labels.template.fill = series.stroke;
}
for (let i = 0; i < props.myArr.length; i++) {
let icon = "circle";
if (i === 1) {
icon = "triangle";
} else if (i === 2) {
icon = "rectangle";
}
createMySeries(props.myArr[i],"VALUE => " + props.myArr[i],true,icon);
}
}
/**
* Hide negative values of soc y axis
*/
myAxis.renderer.labels.template.fill = "#f1c705";
myAxis.renderer.labels.template.fontWeight = 600;
myAxis.renderer.labels.template.adapter.add("text",(label,target,key) => {
if (target.dataItem && target.dataItem.value < 0) {
return "";
} else {
return label;
}
});
myAxis.cursorTooltipEnabled = false;
chart.cursor = new am4charts.XYCursor();
// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.legend.itemContainers.template.paddingBottom = 15;
// chart.scrollbarX = new am4core.Scrollbar();
chartRef.current = chart;
return () => {
chart.dispose();
};
},[props.data]);
What is the problem here ? There is nothing more in the example to takes care of the zoom event. It usually works fine... What can I do ?
As suggested by xorspark, my data was not sorted correctly. It is now ordered by date and it works just fine.