Fixed ValueAxis scale
This demo shows how we can use ValueAxis event "ready" to fix its scale (min and max values) on load so it does not change when chart is zoomed or scrolled.
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/ * --------------------------------------- */
am4core.useTheme(am4themes_animated);
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { date: new Date(2018, 0, 1), value: 450, value2: 362, value3: 699 }, { date: new Date(2018, 0, 2), value: 269, value2: 450, value3: 841 }, { date: new Date(2018, 0, 3), value: 700, value2: 358, value3: 699 }, { date: new Date(2018, 0, 4), value: 490, value2: 367, value3: 500 }, { date: new Date(2018, 0, 5), value: 500, value2: 485, value3: 369 }, { date: new Date(2018, 0, 6), value: 550, value2: 354, value3: 250 }, { date: new Date(2018, 0, 7), value: 420, value2: 350, value3: 600 }];
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.grid.template.location = 0;dateAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.events.on("ready", function (ev) { ev.target.min = ev.target.min; ev.target.max = ev.target.max;});
// Create seriesfunction createSeries(field, name) { var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = field; series.dataFields.dateX = "date"; series.name = name; series.tooltipText = "{dateX}: [b]{valueY}[/]"; series.strokeWidth = 2;
return series;}
createSeries("value", "Series #1");createSeries("value2", "Series #2");createSeries("value3", "Series #3");
chart.legend = new am4charts.Legend();chart.cursor = new am4charts.XYCursor();chart.scrollbarX = new am4core.Scrollbar();<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: 500px;}fixed-valueaxis-scale