0

I am using following code to plot a graph in which x-axis is logarithmic but labels on the x-axis are being displayed in scientific notation. I want them to appear like the numbers used in the data. I have tried using callback: function (value, index, values) but plot disappear after using these. Can somebody help me that what should I change to get this right.

PS. I cannot use charts.js above version 2.9.4 due to some limitations.

Best Regards.

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
    <title>Chart</title>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"></script>
    <style>
        body { margin: 0; padding: 0; }
        #container { width: 100%; }
    </style>
</head>
<body>
<div id='container'>
    <canvas id='myChart'></canvas>
</div>
<script>
    Chart.defaults.global.animation.duration = 1000;
    Chart.defaults.global.animation.easing = 'linear';
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['10','2000','30000','50000','60000','700000',],
            datasets: [
               {label: 'ABC' ,
                fill: true ,
                data: [ 
                  { x: '10', y: 2 },
                  { x: '2000', y: 4 },
                  { x: '30000', y: 7 },
                  { x: '50000', y: 8 },
                  { x: '60000', y: 8.5 },
                  { x: '700000', y: 9 }
                  ],
                borderWidth: 1},
             ]
        },
        options: {
            aspectRatio:  1.6,
            title: {
                display: true,
                position: 'top',
                text: 'Ref Data'
            },
            legend: {
                display: true,
                position: 'right',
            },
            scales: {
                yAxes: [{
                    id: 'first-y-Axis',
                    display: true,
                    scaleLabel: {
                       display: true,
                       labelString: 'Demo y-axis'
                    }
                    }],
                xAxes: [{
                    id: 'first-x-Axis',
                    display: true,
                    type: 'logarithmic',
                    scaleLabel: {
                       display: true,
                       labelString: 'Demo x-axis'
                    },
                    ticks: {
                       min:  0 ,
                       max:  700000 
                       //Following commented line were copied from internet for the solution but chart is shown blank after uncommenting these
                       //callback: function (value, index, values) {
                       //return Number(value.toString()) //pass tick values as a string into Number function
                       //}
                    }
                    }]
            },
            plugins: {
                colorschemes: {
                    scheme: 'brewer.Paired12'
                    }
                }
        }
    });
</script>
</body>
</html>

Improve this question

1 Answer 1

Reset to default
1

The callback just works fine with or without toString()

callback: function (val, index, ticks) {
   return Number(val);
}

And in version 2.9.4, you should use suggestedMin and suggestedMax instead of min and max.

https://www.chartjs.org/docs/2.9.4/axes/cartesian/linear.html

If you want to limit the number of ticks for the clear view, You can set the maxTicksLimit property.

Snippet

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
<head>
    <title>Chart</title>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"></script>
    <style>
        body { margin: 0; padding: 0; }
        #container { width: 100%; }
    </style>
</head>
<body>
<div id='container'>
    <canvas id='myChart'></canvas>
</div>
<script>
    Chart.defaults.global.animation.duration = 1000;
    Chart.defaults.global.animation.easing = 'linear';
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['10','2000','30000','50000','60000','700000',],
            datasets: [
               {label: 'ABC' ,
                fill: true ,
                data: [ 
                  { x: '10', y: 2 },
                  { x: '2000', y: 4 },
                  { x: '30000', y: 7 },
                  { x: '50000', y: 8 },
                  { x: '60000', y: 8.5 },
                  { x: '700000', y: 9 }
                  ],
                borderWidth: 1},
             ]
        },
        options: {
            aspectRatio:  1.6,
            title: {
                display: true,
                position: 'top',
                text: 'Ref Data'
            },
            legend: {
                display: true,
                position: 'right',
            },
            scales: {
                yAxes: [{
                    id: 'first-y-Axis',
                    display: true,
                    scaleLabel: {
                       display: true,
                       labelString: 'Demo y-axis'
                    }
                    }],
                xAxes: [{
                    id: 'first-x-Axis',
                    display: true,
                    type: 'logarithmic',
                    scaleLabel: {
                       display: true,
                       labelString: 'Demo x-axis'
                    },
                    ticks: {
                       maxTicksLimit: 6,
                       suggestedMin: 0,
                       suggestedMax: 700000,
                       callback: function (val, index, ticks) {
                          return Number(val);
                      }
                    }
                    }]
            },
            plugins: {
                colorschemes: {
                    scheme: 'brewer.Paired12'
                    }
                }
        }
    });
</script>
</body>
</html>

Improve this answer
13
  • Thanks a lot for the reply. Axis are marked in normal values but why are min and max not applied correctly. As you can see, min is 0 while max is 70000 and axis level for max are not displayed properly. How can I force that?
    – Pacman
    Commented Sep 7, 2023 at 12:50
  • It is a version issue, In 2.9.4 there is no min or max option. You have to use suggestedMin and suggestedMax instead. I updated my answer.
    – BadPiggie
    Commented Sep 8, 2023 at 4:36
  • Whenever you refer to the documentation. Make sure you refer to the correct version. By default, the doc always lands us on the latest version. :p
    – BadPiggie
    Commented Sep 8, 2023 at 4:40
  • 1
    @Pacman As I know you cannot specify like 10, 100... but you can limit the ticks using maxTicksLimit. By setting it will create no more than a specified amount of ticks. The default is 11. Check my answer, I updated it with maxTicksLimit: 6
    – BadPiggie
    Commented Sep 8, 2023 at 12:53
  • 1
    It is not recommended to hardcode all possible values. To check whether the tick is a power of 10 or not, You can do if (Math.log10(tick) % 1 === 0) { return tick; }
    – BadPiggie
    Commented Sep 9, 2023 at 11:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.