Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Graph.js does not apply my options setting

I have tried using lots of suggested things but nothing is working
I am trying to start y-axis from 0 but if there is only one data (one label and one data) it gives value on axis from example image -1 to 1 Which I am trying to avoid. If there is multiple data See Image still it is not starting from 0

Below jsDelivr I am using
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

I have also tried below CDN it did not work
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js

My frontend is in ejs

Below is the function I am using to create and manipulate chart

function updateChart(lables, data, id, datasetLbl) {
    let date = moment();
    date = date.format('YYYY/MM/DD');

    const ctx = document.getElementById(id).getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: lables.length < 1 ? March 1, 2024 : lables, // Assuming each data point has a label
            datasets: [
                {
                    label: datasetLbl,
                    data: !data.length ? [0] : data, // Assuming each data point has a value
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1,
                },
            ]   ,
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    suggestedMin: 0,
                    stepSize: 1
                },
                x: {
                    display: true,
                },
            },
        },
    });
}

I have tried lots of things

options: {
            scales: {
                y: {
                    beginAtZero: true,
                    // min: 0,
                    //suggestedMin: 0,
                    ticks:{
                        //here also I have tried to define suggestedMin and min but did not work
                    },
                },
                x: {
                    display: true,
                },
            },
        },

Nothing is affecting not stepsize not min every option has no effect on my chart

I don’t know how to solve it

Tags:

2

Answers


  1. 0

    when there’s only one data point.

    bro be sure that your data array contains valid numerical values. If there’s only one data point and it’s not 0, the chart might adjust the y-axis range based on that single value.

    enter code here

    function updateChart(labels, data, id, datasetLabel) {

    console.log("Labels:", labels);
console.log("Data:", data);


const ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels.length < 1 ? [moment().format('YYYY/MM/DD')] : labels,
        datasets: [
            {
                label: datasetLabel,
                data: data.length < 1 ? [0] : data,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1,
            },
        ],
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                // Other options like min or suggestedMin can be added here
            },
            x: {
                display: true,
            },
        },
    },
});

    }

    by logging the labels and data arrays, you can verify if they contain the expected values. Additionally, check if there are any other conflicting configurations or external factors affecting the chart rendering.

    U can also create a minimal reproducible example (e.g., a CodePen or JSFiddle) demonstrating the problem
    good luck

    Login or Signup to reply.
  2. 0

    I think you are looking for suggestedMin:

    options: {
    scales: {
        y: {
            suggestedMin: 0,
            ...
        },
        ...
    },
},
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search