All geek questions in one place

Problems with Chart.js advanced options

I'm trying to make a chart with HTML5, stumbled upon Chart.js, which seemed to be perfect, immediately earned it and tried the basic options and got exactly what I want. Then I went to the documentation website: http://www.chartjs.org/docs/ and looked at the section "Graphics Settings" and tried to add some of my own further design for my graphics.

Here is the JsFiddle of my graph ( http://jsfiddle.net/Skylights/j8Ah3/ ) ... and a comment where the "extra" parameters just don't do anything ... I have no idea what I'm doing wrong. Where should I post these additional options to make them work.

I think I missed something by adding or allowing options.

//Visitors Graph var lineChartData = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], datasets: [{ fillColor: "rgba(0,0,0,0)", strokeColor: "rgba(197,115,30,1)", pointColor: "#c5731e", pointStrokeColor: "#c5731e", data: [65, 59, 90, 81, 56, 55, 40], // A few random options that don't work... scaleFontColor : "#f00", datasetStrokeWidth : 5, }, { fillColor: "rgba(0,0,0,0)", strokeColor: "rgba(197,171,30,1)", pointColor: "#c5ab1e", pointStrokeColor: "#c5ab1e", data: [28, 48, 40, 19, 96, 27, 100] }] } // Draw Visitors Graph Line var myLine = new Chart(document.getElementById("visitors-graph").getContext("2d")).Line(lineChartData);
+4
source share
1 answer

You add them to the wrong sub-object; options should be passed as the second argument, for example:

 var lineChartData = { ... }; var options = {  scaleFontColor: "#f00",  datasetStrokeWidth: 5 }; var myElement = document.getElementById("visitors-graph").getContext("2d"); var myLine = new Chart(myElement).Line(lineChartData, options);

Demo: http://jsfiddle.net/tG7tc/

+15
source

Source: https://habr.com/ru/post/1496684/

More articles:


All Articles