Support for big numbers with delimiter

[Pryla]

Great work! I am using your chart images for a project, where users generate huge numbers between 100k and 100Mio. Those numbers just look awful inside any chart or on the y-axis. Do you have a non js-solution for this issue? Because the images are provided within an email so there is no js-support given.

[typpo]

Hi @Pryla,

Thanks for the feedback! Can you be more specific about what a solution would look like?

One option is set the labels on the graph with suffixes, e.g. 100k or 100M. The best way to do this is by using the ticks.callback option provided by the Chart.js API: https://stackoverflow.com/questions/51108964/shorten-number-labels-in-charts-js

Here's a full example:

{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Count',
      data: [ 5000000, 6000000, 70000000, 1000080, 19000000 ]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          callback: function(value, index, values) {
            return value / 1e6 + 'M';
          }
        }
      }]
    }
  }
}

Link

[Pryla]

Hi @typpo
thank you for sharing this link I just did not find it before.

My problem is the callback function which always produces the unexpected string error.

My code looks like this:

<img src="https://quickchart.io/chart?width=500&height=300&c={
type:'line',
 data:{
 labels:['2016','2017','2018','2019'],
  datasets:[{
   label:'Umsatz',
   backgroundColor:'rgb(240,125,0)',
   data:[10,20,30,40]
  }]
 },
options:{
 scales:{
  yAxes:[{
   ticks:{
     callback:function(value,index,values){
        <?php echo "return value / 1e6 +'M';" ?>
       // or
       return value / 1e6 + 'M';
     }
    }
   }]
  }
 }
}
">

Is there a chance to get this to work? Thank you! In my case I will generate this while sending an email.

Thank you for your help! It is much appreciated!

[typpo]

I'm not sure what you're trying to do here. The callback function is just a label formatter, so you should not be putting PHP code in it. Your server should output values in the datasets.data array.

[Pryla]

I figured out that the
return value / 1e6 + 'M';

was causing the unexpected string error with the 'M'. So I just removed it and put it into the label. I don't know why the error was thrown because in this example or the realtime editor it works just fine.

Thanks anyways.