<!doctype html> <html> <head> <title>Line Chart Multiple Axes</title> <script src="../dist/Chart.bundle.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div style="width:75%;"> <canvas id="canvas"></canvas> </div> <button id="randomizeData">Randomize Data</button> <script> var randomScalingFactor = function() { return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1)); }; var randomColor = function(opacity) { return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')'; }; var lineChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], yAxisID: "y-axis-1", }, { label: "My Second dataset", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], yAxisID: "y-axis-2" }] }; $.each(lineChartData.datasets, function(i, dataset) { dataset.borderColor = randomColor(0.4); dataset.backgroundColor = randomColor(1); dataset.pointBorderColor = randomColor(0.7); dataset.pointBackgroundColor = randomColor(0.5); dataset.pointBorderWidth = 1; }); window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = Chart.Line(ctx, { data: lineChartData, options: { responsive: true, hoverMode: 'label', stacked: false, title:{ display:true, text:'Chart.js Line Chart - Multi Axis' }, scales: { xAxes: [{ display: true, gridLines: { offsetGridLines: false } }], yAxes: [{ type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: "left", id: "y-axis-1", }, { type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: "right", id: "y-axis-2", // grid line settings gridLines: { drawOnChartArea: false, // only want the grid lines for one axis to show up }, }], } } }); }; $('#randomizeData').click(function() { lineChartData.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]; lineChartData.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]; window.myLine.update(); }); </script> </body> </html>