Search code examples
chart.jslinechart

Numeric X axis for linechart

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?

Solution

  • 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.