How to add simple option to chartjs correctly

by

👍:0

The option referenced in the (question) comments is from PR 521 that has not been merged into the main branch yet. This was later made into a PR 897, which too is yet to be merged.

So, if you want this feature, you should be using code from either of the above.

Here is a fiddle – http://jsfiddle.net/trhcafut/ that does just that. I just added the following block of code to the end (just scroll to the very end of the JS block), after Chart.Core and Chart.Line from the PR.

var lineChartData = {
    labels : ["January", "February", "March", "April", "May", "June", "July"],
    datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor : "rgba(151,187,205,0.2)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [28, 48, 40, 19, 86, 27, 90]
        }
    ]
}

var ctx_all = $("#canvas_all").get(0).getContext("2d");
window.myLine = new Chart(ctx_all).Line(lineChartData, {
    showXLabels: 3
});

Note that you won’t be getting any changes made to Chart.js after the branch if you do this.

Leave a comment