[Chartjs]-How to create a linechart with Chart.JS (not filled)

by

2👍

According to the Chart JS Docs, you’ll want to specify:

 fill: false

in your chart options. Your code would look something like this:

function UpdateLineChart(data) {
        //Set data returned from Server
        lineChartData.datasets[0].data = data.lineChartData;
        lineChartData.labels = data.hora;
        //Update the Pie Chart
        var canvasForLineChart = document.getElementById("canvasForLineChart");
        var context2DLine = canvasForLineChart.getContext("2d");
        var myChart = new Chart(context2DLine, {
            data: {
                datasets: [{
                  fill: false,               
                  lineTension: 0.1,
                  borderCapStyle: 'butt',
                  borderDash: [],
                  borderDashOffset: 0.0,
                  borderJoinStyle: 'miter',
                  pointBackgroundColor: "#fff",
                  pointBorderWidth: 1,
                  pointHoverRadius: 5,
                  pointHoverBorderWidth: 2,
                  pointRadius: 1,
                  pointHitRadius: 10,
                  data: [0]
                }]                
             }
        });
    }

1👍

backgroundColor 'rgba(0,0,0,0.1)'

That should set your opacity to .1, you can go to zero I think but you should test it. I see you commented out the border color you had set to 1 opacity which is solid.

1👍

fill: false

should do the work, where do you call the UpdateLineChart function?

Leave a comment