Javascript examples for Chart.js:Chart Tooltip
Chart.js Y axis label, reverse tooltip order, shorten X axis labels
<html> <head> <title>Chart js line example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script> <script type="text/javascript"> window.onload=function(){//from w w w . j a va 2 s . c o m var chartColors = { red: 'rgb(255, 99, 132)', orange: 'rgb(255, 159, 64)', yellow: 'rgb(255, 205, 86)', green: 'rgb(75, 192, 192)', blue: 'rgb(54, 162, 235)', purple: 'rgb(153, 102, 255)', grey: 'rgb(231,233,237)' }; var randomScalingFactor = function() { return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100); } var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var config = { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", backgroundColor: chartColors.red, borderColor: chartColors.red, data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ], fill: false, }, { label: "My Second dataset", fill: false, backgroundColor: chartColors.blue, borderColor: chartColors.blue, data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ], }] }, options: { responsive: true, title: { display: true, text: 'Chart.js Line Chart' }, tooltips: { mode: 'label', }, hover: { mode: 'nearest', intersect: true }, scales: { xAxes: [{ display: true, ticks: { userCallback: function(label, index, labels) { if(typeof label === "string") { return label.substring(0,1) } return label }, }, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Value' } }] } } }; var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx, config); } </script> </head> <body> <div style="width:75%;"> <canvas id="canvas"></canvas> </div> </body> </html>