You must be logged in to post your query.
Home › Forums › Chart Support › Legends to Line Graph?
Tagged: line chart, showInLegend, solved
Hi! I tried looking for examples to this, but being new to Canvas.js, could find none. How would I add a legend to this line graph?
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { zoomEnabled: true, panEnabled: true, title:{ text: "Try Zooming and Panning" }, legend: { horizontalAlign: "right", verticalAlign: "center" }, axisY:{ includeZero: false }, data: data, // random generator below }); chart.render(); } var limit = 1000; //increase number of dataPoints by increasing this var y = 0; var data = []; var dataSeries = { type: "line" }; var dataPoints = []; for (var i = 0; i < limit; i += 1) { y += (Math.random() * 10 - 5); dataPoints.push({ x: i - limit / 2, y: y }); } dataSeries.dataPoints = dataPoints; data.push(dataSeries); </script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width: 100%;"> </div> </body> </html>
Thanks!
You need to set showInLegend: true to enable legends, which defaults to false. Here is the working jsfiddle.
You must be logged in to reply to this topic. Login/Register