Numeric X axis for linechart

Question

I want to render a line chart with a set of (x,y) values. Both x axis and y-axis need to scaled. I mean say, I have values (1,10),(2,20),(4,30),(8,40) The distance between 1 and 2 should be half of between 2 and 4. Which in turn should be half of 4 and 8.

When I try with linechart now, since labels are just text, it shows me 1,2,4,8 with same gap between them.

Please check the example

var ctx = document.getElementById("chart").getContext("2d");
var data = {
    labels: [1, 2, 4, 8],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",

        data: [10,20,30,40]
    }]
};

Is there any way to achieve this?

Shotgun Ninja · Answer 1 · 2018-01-23T20:37:24.207

If you wanted, you could use the 'scatter' chart type (which was relatively recently introduced), or just override the default X-axis type to make it 'linear' instead of the default 'category' setting ('time' and 'logarithmic' are other options).

However, if you take this approach, you will need to change your data format:

var data = {
    // No more "labels" field!
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",

        data: [{x:1,y:10},{x:2,y:20},{x:4,y:30},{x:8,y:40}] // Note the structure change here!
    }]
}

You will also need to make sure (if you continue using 'line' as the chart type) that you override the options:

var options = {
    scales: {
        xAxes: [{
            type: 'linear',
            // ...
        }]
    }
}

There may be more steps required than are shown in this answer (I haven't mocked this up and I don't know your existing options), but these are the main steps.

I had a line plot before, and I can confirm that the only needed changes are having datapoints stored as {x:..., y:...} with added type: 'linear' in options. Also, there is no need to maintain data.labels, that field can be completely removed. — Luka Mesaric, Jan 10 '21 at 19:57

score 2 · Accepted Answer · answered Aug 12 '15 at 07:36

2

Check out the Scatter chart extension (http://dima117.github.io/Chart.Scatter/) - listed under Community Extensions at http://www.chartjs.org/docs/#advanced-usage-community-extensions.

This supports number scales.

answered Aug 12 '15 at 07:36

potatopeelings

40,709
7
95
119

Thank you :) this was exactly what I was looking for. – Jishnu Aug 12 '15 at 10:03

score 1 · Answer 3 · answered Jan 06 '20 at 13:08

if you want to update a array use in js :

var aChartDataMoy       = [];
for (i = 0; i < nbTamis; i++) {
            aChartDataMoy.push({
                'x': parseFloat(aTamis[i]),
                'y': parseFloat(aMoyenne[i])
            });   
}

and

datasets: [{
                    label: "Moyenne",
                    borderColor: 'rgb(229, 57, 53)',
                    borderWidth: 1,
                    fill: false,
                    data: aChartDataMoy
                }

Numeric X axis for linechart

3 Answers3