Chart.js with dual axis on bar and line graph

Question

I am using Quince's Chart.js version from this topic Chart.js how to get Combined Bar and line charts?. Bar and Line graph look very nice. Anyway, axis has to be separated into Y1 and Y2 which i cannot find that Quince's version support.

I did search again and found this topic How to add second Y-axis for Bar and Line chart in Chart.js? which recommended to use Khertan's Chart.js which it can handle dual axis but i cannot find the way to combine bar and line within one plot.

I tried to input this option into Quince's version but it did not work.

scaleUse2Y: true,

Is there any way i can do this? Thank you for your kindly help.

<script>
Chart.defaults.global.templateInterpolators = {
    start: "[[",
    end: "]]"
};
Chart.defaults.global.scaleLabel = "[[= value ]]";
Chart.defaults.global.tooltipTemplate = "[[if (label){]][[= label ]]:     [[}]][[= value ]]";
Chart.defaults.global.multiTooltipTemplate = "[[= value ]]";


var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        color:"#F7464A",
        //new option, barline will default to bar as that what is used to create the scale
        type: "line",
        fillColor: "rgba(220,220,220,0.2)",  //White
        strokeColor: "rgba(220,220,220,1)", //gray
        pointColor: "rgba(220,220,220,1)",  //gray
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 20, 43, 81, 56, 55, 40]
    }, {
        label: "My First dataset",
        color:"#F7464A",
        //new option, barline will default to bar as that what is used to create the scale
        type: "bar",
        fillColor: "rgba(255, 187, 0, 1)",
        strokeColor: "rgba(255, 187, 0, 1)",
        pointColor: "rgba(255, 187, 0, 1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [32, 25, 43, 22, 12, 92, 33]
    }]
};

//canvases
var lineBar = document.getElementById("line-bar").getContext("2d");

//charts
var myLineBarChart = new Chart(lineBar).Overlay(data);

In this HTML

<ul class="tabs"><li><input type="radio" name="tabs" id="tab1"checked />
<label for="tab1" onclick="rePlot(1,3)">2015</label>
<div id="tab-content1" class="tab-content" onclick="rePlot(1,3)">
<canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"></canvas>
</div>
</li>

<li><input type="radio" name="tabs" id="tab2" /><label for="tab2" onclick="rePlot(2,3)">2014</label>
<div id="tab-content2" class="tab-content" onclick="rePlot(2,3)">

<canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"></canvas>
</div>
</li>

<li><input type="radio" name="tabs" id="tab3" /><label for="tab3" onclick="rePlot(3,3)">2013</label>
<div id="tab-content3" class="tab-content" onclick="rePlot(3,3)">

<canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"></canvas>
</div>
</li>
</ul>

Tried combining Quince's with stackoverflow.com/a/31048147/360067? — potatopeelings

Quince Quince · Accepted Answer · 2015-10-21T16:22:21

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>

Chart.js with dual axis on bar and line graph

2 Answers