Play series animations when chart scrolls into view
This demo shows how we can trigger a replay of series’ animations when previously invisible chart scrolls into view.
Open in:New tab
/** * --------------------------------------- * 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/ * --------------------------------------- */
function createChart(div) { var root = am5.Root.new(div);
root.setThemes([am5themes_Animated.new(root)]);
var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "panX", wheelY: "zoomX", layout: root.verticalLayout }) );
var data = [ { year: "2021", europe: 2.5, namerica: 2.5, asia: 2.1, lamerica: 1, meast: 0.8, africa: 0.4 }, { year: "2022", europe: 2.6, namerica: 2.7, asia: 2.2, lamerica: 0.5, meast: 0.4, africa: 0.3 }, { year: "2023", europe: 2.8, namerica: 2.9, asia: 2.4, lamerica: 0.3, meast: 0.9, africa: 0.5 } ];
// Create axes // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/ var xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "year", renderer: am5xy.AxisRendererX.new(root, { cellStartLocation: 0.1, cellEndLocation: 0.9 }),
tooltip: am5.Tooltip.new(root, {}) }) );
xAxis.data.setAll(data);
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }) );
chart.children.push( am5.Label.new(root, { text: "▼▼▼ [bold]Scroll down for more[/] ▼▼▼", width: am5.p100, textAlign: "center", fill: am5.color(0x999999) }) );
function makeSeries(name, fieldName) { var series = chart.series.push( am5xy.ColumnSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: fieldName, categoryXField: "year" }) );
series.columns.template.setAll({ tooltipText: "{name}, {categoryX}:{valueY}", width: am5.percent(90), tooltipY: 0 });
series.bullets.push(function () { return am5.Bullet.new(root, { locationY: 0.5, sprite: am5.Label.new(root, { text: "{valueY}", fill: root.interfaceColors.get("alternativeText"), centerY: am5.p50, centerX: am5.p50, populateText: true }) }); });
series.data.setAll(data); }
makeSeries("Europe", "europe"); makeSeries("North America", "namerica"); makeSeries("Asia", "asia"); makeSeries("Latin America", "lamerica"); makeSeries("Middle East", "meast"); makeSeries("Africa", "africa");
return chart;}
// Set up animations on scroll(window.addEventListener("DOMContentLoaded", function () { viewPortHandler();}), window.addEventListener("load", function () { viewPortHandler(); }), window.addEventListener("resize", function () { viewPortHandler(); }), window.addEventListener("scroll", function () { viewPortHandler(); }));
var charts = [];
charts.push(createChart("chartdiv1"));charts.push(createChart("chartdiv2"));charts.push(createChart("chartdiv3"));charts.push(createChart("chartdiv4"));
function viewPortHandler() { am5.array.eachReverse(charts, function (chart) { if (isElementInViewport(chart.root.dom)) { //chart.appear(1000, 100); chart.series.each(function (series) { series.appear(); }); am5.array.remove(charts, chart); } });}
function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) );}<div id="chartdiv1" class="chart"></div><div id="chartdiv2" class="chart"></div><div id="chartdiv3" class="chart"></div><div id="chartdiv4" class="chart"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
.chart { width: 100%; height: 400px; margin: 0 auto 120vh auto;}play-series-animations-when-chart-scrolls-into-view