Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Charts js only showing 2 data points on sparkline

Tags:

chart.js

Charts js only showing 2 data points on sparkline style charts that has 24 data points. Is this a chart size issue? I have another chart based of the same data that works fine... is this a tool tip issue or a sizing issue? I cannot seem to get this to display all the data. I have tried many configs but he problem persists. Thanks!

enter image description here enter image description here

        var style = {
        maintainAspectRatio: false,
        legend: {
            display: false
        },

        tooltips: {
            bodySpacing: 1,
            mode: "nearest",
            intersect: 0,
            position: "nearest",
            xPadding: 2,
            yPadding: 2,
            caretPadding: 5,

        },
        hover: {mode: null},

        responsive: false,

        scales: {
            yAxes: [{
                ticks: {
            display: false
        },
                gridLines: 0,
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }],
            xAxes: [{
                display: 0,
                gridLines: 0,
                ticks: {
                    display: false
                },
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }]
        },
        layout: {
            padding: {left: 10, right: 10, top: 10, bottom: 10}
        }
    };

    var config = {

        type: 'line',
        responsive: true,

        data: {
            datasets: [{
                label: "",
                borderColor: "#80b6f4",
                pointBorderColor: "#FFF",
                pointBackgroundColor: "#18ce0f",
                pointBorderWidth: 1,
                pointHoverRadius: 2,
                pointHoverBorderWidth: 1,
                pointRadius: 1,
                fill: true,
                backgroundColor:gradientFill,
                borderWidth: 2,
                scaleFontColor: "#FFF",
                fontColor: "#FFF",
                data: cleandata,
                drawBorder: true,

            }]
        },
        options: {

            layout: {
                padding: {
                left: 5,
                right: 5,
                top:5,
                bottom: 5
        }
    }
            },
        options: style
    }
    showChart = new Chart(ctx , config);
    });
like image 803
Ray Koren Avatar asked Jan 29 '23 04:01

Ray Koren


1 Answers

I found the issue. I was not passing my Labels data correctly. It should have been passed as such:

data: {
       labels: labels,
        datasets: [{ 

etc...

like image 196
Ray Koren Avatar answered Mar 25 '23 06:03

Ray Koren