CODEWITHSUNDEEP
javascripthtmlchartschart.js
gina
gina

Reputation: 179

How to create a linechart with Chart.JS (not filled)

I am trying to create a line chart with chart.js library, my goal is that the chart should be a single line, the area under it MUST NOT BE FILLED.

But whatever color I put, I dont see that its getting refreshed.

this is the JS that generates the chart.

<table style="width: 100%">
        <tr>
            <td style="width: 50%; text-align: center">
                <canvas id="canvasForLineChart" height="200" width="400">Chart is Loading...</canvas>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        ////////////////////////////////////////////////////////////////////////////////////////////////////////
        //Line Chart JSON Config (Line Chart Has fixed 1 data series here)
        var lineChartData = {
            //labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    fill: false,               
                    lineTension: 0.1,
                    //backgroundColor: "#000000",
                    //borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    //pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    //pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    //pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [0]
                }
            ]
        }

        //LineChart Update method
        function UpdateLineChart(data) {
            //Set data returned from Server
            //lineChartData.datasets[0].fillColor = data.colorString;
            lineChartData.datasets[0].data = data.lineChartData;
            lineChartData.labels = data.hora;
            //Update the Pie Chart
            var canvasForLineChart = document.getElementById("canvasForLineChart");
            var context2DLine = canvasForLineChart.getContext("2d");
            new Chart(context2DLine).Line(lineChartData);
        }

    </script>

But my result is this:

enter image description here

And I want something like this:

enter image description here

Upvotes: 2

Views: 1504

Answers (3)

Glen Despaux Jr
Glen Despaux Jr

Reputation: 1114

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]
                }]                
             }
        });
    }

Upvotes: 2

barha
barha

Reputation: 679

fill: false

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

Upvotes: 1

D. Cantatore
D. Cantatore

Reputation: 187

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.

Upvotes: 1

Related Questions