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?

Answer 1

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.