[Chartjs]-Chart.js with dual axis on bar and line graph

by

9👍

✅

I have finally pushed my port of multi axis feature to the master on this fork. As an extremely brief overview of what is happening i have added a collection of axes into the scale. Each axis is able to calculate where a value should be position in terms of y against it’s own scale. The only thing that developers need to now do is say which axes group each dataset needs to belong. Each axis can also be told what colour it should be and what side of the graph it should appear on.

How to use it – within each of your datasets declare a new property called yAxesGroup

 datasets: [{
         label: "My First dataset",
         type: "bar",
         yAxesGroup: "1", //any with same group will appear in the same axis, also this can be anything as long as you always refer to it with the same name
         fillColor: "rgba(151,137,200,0.5)",
         strokeColor: "rgba(151,137,200,0.8)",
         highlightFill: "rgba(151,137,200,0.75)",
         highlightStroke: "rgba(151,137,200,1)",
         data: [28, 48, 40, 19, 86, 27, 90]
     },

to then give more options to this axis add an extra property to the data called yAxis which is an array of axis options. By default each axis will show a scale on the left and in whatever colour is default or you have set as the overall font colour but here is where you can override them 

 var overlayData = {
     labels: ["January", "Februarya", "March", "April", "May", "Jun", "July"],
     datasets: [{
         label: "My First dataset",
         type: "bar",
         yAxesGroup: "1",
         fillColor: "rgba(151,137,200,0.5)",
         strokeColor: "rgba(151,137,200,0.8)",
         highlightFill: "rgba(151,137,200,0.75)",
         highlightStroke: "rgba(151,137,200,1)",
         data: [28, 48, 40, 19, 86, 27, 90]
     }, {
         label: "My Second dataset",
         type: "line",
         yAxesGroup: "2",
         fillColor: "rgba(151,187,205,0.5)",
         strokeColor: "rgba(151,187,205,0.8)",
         highlightFill: "rgba(151,187,205,0.75)",
         highlightStroke: "rgba(151,187,205,1)",
         data: [8, 38, 30, 29, 46, 67, 80]
     }],
     yAxes: [{
         name: "1",
         scalePositionLeft: false,
         scaleFontColor: "rgba(151,137,200,0.8)"
     }, {
         name: "2",
         scalePositionLeft: true,
         scaleFontColor: "rgba(151,187,205,0.8)"
     }]
 };

now this chart will have 2 axis, one on the left and one on the right.

A few things to note, if any values are going to be below 0 you need to set the overall attribute of scaleBeginAtZero to false otherwise it gets a bit messed up. Also each axis will have it’s own 0 base line so the 2 sides will not line up. this is as intended as i decided the reason you have two axis is because they are showing different scales so for everything to be sit in nicely 0 needs to at a different position for each axis.

I have gone through and tested it for regression aginst other features i have added and it all seems to play nicely but if you do use this and notice anything, odd, let me know.

Also i have not been able to write this as plugin for chartjs as so much is touched in the core that it does not make sense as such you would the built version from the fork and not just override an original version of chartjs.

Overall this is the effect it will produce

 var overlayData = {
     labels: ["January", "Februarya", "March", "April", "May", "Jun", "July"],
     datasets: [{
         label: "My First dataset",
         type: "bar",
         yAxesGroup: "1",
         fillColor: "rgba(151,137,200,0.5)",
         strokeColor: "rgba(151,137,200,0.8)",
         highlightFill: "rgba(151,137,200,0.75)",
         highlightStroke: "rgba(151,137,200,1)",
         data: [28, 48, 40, 19, 86, 27, 90]
     }, {
         label: "My Second dataset",
         type: "line",
         yAxesGroup: "2",
         fillColor: "rgba(151,187,205,0.5)",
         strokeColor: "rgba(151,187,205,0.8)",
         highlightFill: "rgba(151,187,205,0.75)",
         highlightStroke: "rgba(151,187,205,1)",
         data: [8, 38, 30, 29, 46, 67, 80]
     }],
     yAxes: [{
         name: "1",
         scalePositionLeft: false,
         scaleFontColor: "rgba(151,137,200,0.8)"
     }, {
         name: "2",
         scalePositionLeft: true,
         scaleFontColor: "rgba(151,187,205,0.8)"
     }]
 };

 window.onload = function () {
     window.myOverlayChart = new Chart(document.getElementById("canvas").getContext("2d")).Overlay(overlayData, {
         populateSparseData: true,
         overlayBars: false,
         datasetFill: true,
     });
 }
<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>

<canvas id="canvas" height="300" width="300"></canvas>

Leave a comment