CODEWITHSUNDEEP
chart.js
Sandes P
Sandes P

Reputation: 37

Chart JS Logarithmic x-axis

I want to create a graph with the x-axis logarithmic. I took an example and changed the type to logarithmic. But I am getting all y values on the y-axis itself(see attached).But when I make y-axis logarithmic, It is works as expected. I am using chartjs version 2.9.3. When I used 2.8.0 there was no output.

This is my code:

    <!doctype html>
    <html>

    <head>
        <title>Logarithmic Line Chart</title>
        <script src="/PHP/test/Chart.min.js"></script>
        <script src="/PHP/test/utils.js"></script>
        <style>
            canvas {
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
            }
        </style>
    </head>

    <body>
    <div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div>
    <button id="randomizeData">Randomize Data</button>
    <script>
        var randomScalingFactor = function() {
            return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
        };

        var config = {
            type: 'line',

            data: {
                labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    fill: false,
                    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
                },]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Line Chart - Logarithmic'
                },
                scales: {
                    xAxes: [{
                        stacked:false,
                        display: true,
                        type:'logarithmic',
                    }],
                    yAxes: [{
                        stacked:false,
                        display: true,

                    }]
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById('canvas');
            window.myLine = new Chart(ctx, config);
        };

        document.getElementById('randomizeData').addEventListener('click', function() {
            config.data.datasets.forEach(function(dataset) {
                dataset.data = dataset.data.map(function() {
                    return randomScalingFactor();
                });

            });

            window.myLine.update();
        });
    </script>
    </body>

</html>

current incorrect output

Upvotes: 3

Views: 1728

Answers (1)

timclutton
timclutton

Reputation: 13004

If both axes are numeric the data needs to be provided as an array of points, i.e.:

[ { x: 111, y: 222 }, ... ]

From the documentation:

This alternate is used for sparse datasets, such as those in scatter charts. Each data point is specified using an object containing x and y properties.

Here's a working example from the posted code:

var config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'red',
      borderColor: 'red',
      fill: false,
      data: [
        { x: 1, y: 1 },
        { x: 2, y: 2 },
        { x: 3, y: 3 },
        { x: 4, y: 4 },
        { x: 5, y: 5 },
        { x: 6, y: 6 },
        { x: 7, y: 7 },
        { x: 8, y: 8 },
        { x: 9, y: 9 },
        { x: 10, y: 10 },
        { x: 11, y: 11 },
        { x: 12, y: 12 },
        { x: 13, y: 13 },
        { x: 14, y: 14 },
        { x: 15, y: 15 }
      ]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart - Logarithmic'
    },
    scales: {
      xAxes: [{
        type: 'logarithmic'
      }]
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById('canvas');
  window.myLine = new Chart(ctx, config);
};
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Upvotes: 2

Related Questions