CODEWITHSUNDEEP
chart.js
ParkerHalo
ParkerHalo

Reputation: 4430

Decimal in x-axis

I'm trying to create a line chart with chart.js where the data in a dataset contains points:

data: [{x:0,y:5},{x:2.1,y:4.3},{x:3.9,y:3}]

The x values of those points contain decimals. The resulting chart looks like this:

enter image description here

Instead of showing the second data point at (2.1 | 4.3) it is drawn at (1 | 4.3)!

Can someone point me into the right direction on this one?

The code to reproduce this behavior:

<body>
    <div>
        <canvas id="myChart" width="400" height="200"></canvas>
    </div>
    <script>
        var ctx = document.getElementById('myChart');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [0.0, 1.0, 2.0, 3.0, 4.0, 5.0],
                datasets: [{
                    label: 'some label',
                    data: [{x:0,y:5},{x:2.1,y:4.3},{x:3.9,y:3}],
                    borderColor: 'red',
                    fill: false,
                    lineTension: 0
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            max: 10,
                            min: 0,
                            stepSize: 0.1
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            max: 6,
                            min: 0,
                            stepSize: 1
                        }
                    }]
                }
            }
        });
    </script>
</body>

Upvotes: 0

Views: 1249

Answers (1)

damienHelper
damienHelper

Reputation: 114

For the y-axis, using the stepSize variable of the ticks option does the trick. Doing the same for the x-axis is a little more complex but not impossible.

The first issue is that your x-axis labels are at integer intervals so the chart has nowhere to position the decimal values than at the closest integer. This can be fixed by specifying all the values in the desired intervals (ie: 0.1, 0.2,...,3.0) in the labels.
Then, making use of the autoSkip and maxTicksLimit, you can hide the labels not needed and so create the chart seen in your image, but with the points in the correct position.

I made a working version of this using your code in this fiddle. Hope this helps!

Upvotes: 1

Related Questions