Find the first and the last data item of the zoomed XYChart
This demo shows how we can use axis’ getSeriesItem() method to find the first and last data items when an XY chart is zoomed.
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "panX", wheelY: "zoomX" }));
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { behavior: "zoomX" }));
cursor.lineY.set("visible", false);
var date = new Date();date.setHours(0, 0, 0, 0);var value = 100;
function generateData() { value = Math.round(Math.random() * 10 - 5 + value); am5.time.add(date, "day", 1); return { date: date.getTime(), value: value };}
function generateDatas(count) { var data = []; for (var i = 0; i < count; ++i) { data.push(generateData()); } return data;}
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { maxDeviation: 0, baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {}), tooltip: am5.Tooltip.new(root, {}) }));
xAxis.on("start", getStartEnd);xAxis.on("end", getStartEnd);
function getStartEnd() { var startDataItem = xAxis.getSeriesItem(series, xAxis.get("start")) || series.dataItems[0]; var endDataItem = xAxis.getSeriesItem(series, xAxis.get("end")); if (startDataItem && endDataItem) { console.log(new Date(startDataItem.get("valueX")), new Date(endDataItem.get("valueX"))); }}
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series = chart.series.push( am5xy.ColumnSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", tooltip: am5.Tooltip.new(root, { labelText: "{valueY}" }) }));
// Add scrollbar// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/chart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
var data = generateDatas(50);series.data.setAll(data);
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series.appear(1000);chart.appear(1000, 100);<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: 95vh;}{ "type": "XYChart", "settings": { "panX": false, "panY": false, "wheelX": "panX", "wheelY": "zoomX", "cursor": { "type": "XYCursor", "settings": { "behavior": "zoomX" }, "properties": { "lineY": { "settings": { "visible": false } } } }, "scrollbarX": { "type": "Scrollbar", "settings": { "orientation": "horizontal" } } }, "properties": { "series": [ "#series-0" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "refs": [ { "data-0": [ { "date": 1792875600000, "value": 100 }, { "date": 1792965600000, "value": 97 }, { "date": 1793052000000, "value": 95 }, { "date": 1793138400000, "value": 90 }, { "date": 1793224800000, "value": 88 }, { "date": 1793311200000, "value": 87 }, { "date": 1793397600000, "value": 91 }, { "date": 1793484000000, "value": 87 }, { "date": 1793570400000, "value": 86 }, { "date": 1793656800000, "value": 91 }, { "date": 1793743200000, "value": 89 }, { "date": 1793829600000, "value": 88 }, { "date": 1793916000000, "value": 89 }, { "date": 1794002400000, "value": 86 }, { "date": 1794088800000, "value": 88 }, { "date": 1794175200000, "value": 92 }, { "date": 1794261600000, "value": 93 }, { "date": 1794348000000, "value": 98 }, { "date": 1794434400000, "value": 98 }, { "date": 1794520800000, "value": 95 }, { "date": 1794607200000, "value": 99 }, { "date": 1794693600000, "value": 95 }, { "date": 1794780000000, "value": 93 }, { "date": 1794866400000, "value": 89 }, { "date": 1794952800000, "value": 89 }, { "date": 1795039200000, "value": 85 }, { "date": 1795125600000, "value": 90 }, { "date": 1795212000000, "value": 90 }, { "date": 1795298400000, "value": 93 }, { "date": 1795384800000, "value": 90 }, { "date": 1795471200000, "value": 92 }, { "date": 1795557600000, "value": 90 }, { "date": 1795644000000, "value": 87 }, { "date": 1795730400000, "value": 91 }, { "date": 1795816800000, "value": 91 }, { "date": 1795903200000, "value": 95 }, { "date": 1795989600000, "value": 98 }, { "date": 1796076000000, "value": 98 }, { "date": 1796162400000, "value": 102 }, { "date": 1796248800000, "value": 105 }, { "date": 1796335200000, "value": 105 }, { "date": 1796421600000, "value": 110 }, { "date": 1796508000000, "value": 106 }, { "date": 1796594400000, "value": 109 }, { "date": 1796680800000, "value": 110 }, { "date": 1796767200000, "value": 111 }, { "date": 1796853600000, "value": 113 }, { "date": 1796940000000, "value": 111 }, { "date": 1797026400000, "value": 110 }, { "date": 1797112800000, "value": 105 } ] }, { "axis-0": { "type": "DateAxis", "settings": { "maxDeviation": 0, "baseInterval": { "timeUnit": "day", "count": 1 }, "renderer": { "type": "AxisRendererX" }, "tooltip": { "type": "Tooltip" } } } }, { "axis-1": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "ColumnSeries", "settings": { "name": "Series", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "labelText": "{valueY}" } } }, "properties": { "data": "#data-0" } } } ]}find-the-first-and-the-last-data-item-of-the-zoomed-xychart