Chart.js - Same min and max value of two charts
Question
I have a simple question:
How can i align this two chartjs charts so to have exact the same grid?
The two charts have same min and max value, furthermore there is a missmatch because in the first chart the y tick labels are letters so the widthes of y axis are different.
Any advice would be usefull,
Chris Pappas
1 answers
solution1
0 ACCPTED 2021-02-08 18:47:02
To my knowledge there is no nice way of doing this. The only dirty workaround I could think of is putting a whole lot of spaces before the tick in the callback from the chart which has to be indented more:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { scales: { yAxes: [{ ticks: { callback: (val) => (` ${val}`) } }] } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
canvas { background-color: #eee; }
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.