Zoom to month by clicking on a DateAxis label
This demo shows how we can implement hit event on DateAxis labels to automatically zoom to the clicked period.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);chart.paddingRight = 40;
var data = [];var value = 50;for (let i = -1400; i < 0; i++) { let date = new Date(); date.setHours(0, 0, 0, 0); date.setDate(i); value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10); if (value < 0) { value = Math.round(Math.random() * 10); } data.push({ date: date, value: value });}
chart.data = data;
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.minGridDistance = 10;dateAxis.renderer.labels.template.rotation = 90;dateAxis.renderer.labels.template.horizontalCenter = "left";dateAxis.renderer.labels.template.verticalCenter = "middle";dateAxis.groupData = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesvar series = chart.series.push(new am4charts.ColumnSeries());series.dataFields.valueY = "value";series.dataFields.dateX = "date";series.tooltipText = "{value}";
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();chart.cursor.snapToSeries = series;chart.cursor.xAxis = dateAxis;
chart.scrollbarX = new am4core.Scrollbar();
// Set up drill-downdateAxis.renderer.labels.template.events.on("hit", function (ev) { var start = ev.target.dataItem.date; var end = new Date(start); end.setMonth(end.getMonth() + 1); dateAxis.zoomToDates(start, end);});<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 250px;}zoom-to-month-by-clicking-on-a-dateaxis-label