Syncing width of the vertical axes across multiple charts
This demo shows how width of the vertical axes can be synchronized across multiple separate charts.
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);
function createChart(div, k) { // Create chart instance var chart = am4core.create(div, am4charts.XYChart);
// Add data chart.data = [ { date: new Date(2018, 0, 1), value: Math.random() * k }, { date: new Date(2018, 0, 2), value: Math.random() * k }, { date: new Date(2018, 0, 3), value: Math.random() * k }, { date: new Date(2018, 0, 4), value: Math.random() * k } ];
// Create axes var 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.contentAlign = "right";
// Create series var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = "value"; series.dataFields.dateX = "date"; series.tooltipText = "{dateX}: [b]{valueY}[/]"; series.strokeWidth = 2;
var bullet = series.bullets.push(new am4charts.CircleBullet()); bullet.circle.stroke = am4core.color("#fff"); bullet.circle.strokeWidth = 2;
chart.events.on("ready", syncAxisWidth);
return chart;}
var chartsToSync = [];
chartsToSync.push(createChart("chartdiv1", 10));chartsToSync.push(createChart("chartdiv2", 100));chartsToSync.push(createChart("chartdiv3", 1000));chartsToSync.push(createChart("chartdiv4", 10000));
function syncAxisWidth() { var maxWidth = 0; var allReady = true; for (var i = 0; i < chartsToSync.length; i++) { var chart = chartsToSync[i]; if (chart.isReady()) { var axis = chart.yAxes.getIndex(0); maxWidth = maxWidth > axis.measuredWidth ? maxWidth : axis.measuredWidth; } else { allReady = false; } }
if (allReady) { for (var i = 0; i < chartsToSync.length; i++) { var chart = chartsToSync[i]; var axis = chart.yAxes.getIndex(0); axis.width = maxWidth; } }}<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: 200px;}syncing-width-of-the-vertical-axes-across-multiple-charts