Chartjs-How to create a dynamic multi-line chart in chart.js

by

3👍

So I don’t have enough reputation points to actually comment on the question. Try removing the background color attribute. It’s possible that the data from the first dataset is bigger than the second one.
I recently completed a dynamic multiline chart using php. My chart config is given below :

var lineChartData = {  //chart config options
    labels : [<?php echo '"'.$labelArray.'"'; ?>],
    datasets : [<?php echo $dataString; ?>],
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, {
    type:"line",
    fill: false,
    data:lineChartData,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    autoSkip : true,
                    min: 2,
                    maxTicksLimit: 10
                }
            }]
        },
    },
    responsive:true
});

The $dataString is the variable where I am passing all the data I’m retrieving from an external url

$dataString = $dataString."{label : '$name','fill' : 'false', data : [$br_values], borderColor : '$color', backgroundColor : 'transparent' },";

Let me know if I missed anything and sorry I did not answer this question sooner, I solved this 2 days ago. For more documentation on Chart.js go here

Kudos

Leave a comment