Scrollable vertically-stacked chart
This demo shows how to apply scroll behavior to a vertically-stacked axis chart.
Open in:New tab
var data = [];var value1 = 20;var value2 = 200;var value3 = 2000;
var names = [ "Raina", "Demarcus", "Carlo", "Jacinda", "Richie", "Antony", "Amada", "Idalia", "Janella", "Marla", "Curtis", "Shellie", "Meggan", "Nathanael", "Jannette", "Tyrell", "Sheena", "Maranda", "Briana"];
for (var i = 0; i < names.length; i++) { value1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * value1 * 0.2);
value2 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * value2 * 0.2);
value3 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * value3 * 0.2);
data.push({ category: names[i], value1: value1, value2: value2, value3: value3 });}
// 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: true, panY: false, wheelX: "none", arrangeTooltips: false, pinchZoomX: true }));
var scrollableContainer = chart.chartContainer.children.unshift( am5.Container.new(root, { width: am5.p100, height: am5.p100, verticalScrollbar: am5.Scrollbar.new(root, { orientation: "vertical", dx: 20 }) }));
chart.yAxesAndPlotContainer.set("height", 700);chart.yAxesAndPlotContainer.set("paddingBottom", 10);scrollableContainer.children.push(chart.yAxesAndPlotContainer);
// make y axes stackchart.leftAxesContainer.set("layout", root.verticalLayout);
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 70 });xRenderer.labels.template.setAll({ multiLocation: 0.5, location: 0.5, centerY: am5.p50, centerX: am5.p50, paddingTop: 10});
xRenderer.grid.template.set("location", 0.5);
var xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "category", tooltip: am5.Tooltip.new(root, {}), renderer: xRenderer }));
xAxis.data.setAll(data);
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/function createSeries(field, margin, column) { var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}), tooltip: am5.Tooltip.new(root, { animationDuration: 0 }),
x: am5.p100, centerX: am5.p100, marginTop: 20 }) );
yAxis.axisHeader.set( "background", am5.Rectangle.new(root, { fillOpacity: 1, fill: root.interfaceColors.get("background") }) );
var series; if (column) { series = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: field, categoryXField: "category", sequencedInterpolation: true, tooltip: am5.Tooltip.new(root, { pointerOrientation: "vertical", labelText: "{valueY}", bounds: { left: 0, top: -10000, bottom: 10000, right: 10000 } }) }) ); } else { series = chart.series.push( am5xy.LineSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: field, categoryXField: "category", sequencedInterpolation: true, tooltip: am5.Tooltip.new(root, { pointerOrientation: "vertical", labelText: "{valueY}", bounds: { left: 0, top: -10000, bottom: 10000, right: 10000 } }) }) ); }
if (!column) { series.bullets.push(function () { return am5.Bullet.new(root, { locationY: 1, locationX: 0.5, sprite: am5.Circle.new(root, { radius: 4, fill: series.get("fill") }) }); }); }
series.data.setAll(data); series.appear();
return series;}
createSeries("value1", 15, false);createSeries("value2", 40, false);createSeries("value3", 40, true);
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { behavior: "none", xAxis: xAxis }));
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/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%; max-width: 100%; height: 400px;}scrollable-vertically-stacked-chart