Chartjs-Image-Chart ChartJs Ticks Callback not Working?

by

1👍

Image-Charts founder here, indeed for security and reliability reasons our Charts API does not currently support JavaScript functions.

PS: we might add JavaScript function support later on based on customer demands though 🙂

0👍

I cannot tell you why image-charts.com is not accepting your request but from Chart.js point of view, your chart configuration looks almost fine, including the ticks.callback. The only problem I can see is that data.labels does not contain the same number of items as data.datasets[0].data.

The presumed problem with your x-axis ticks.callback is that you return the string value combined with an empty string, which produces the same result as without ticks.callback.

"ticks": {
   "callback": function(value, index, values) {
     return '' + value;
   }
 }

Not sure what you expected but please be aware that the x-axis ticks are the ones that appear at the bottom of the chart.

In case you want to format the tick labels on the y-axis, you could use the following (see https://stackoverflow.com/a/1726662/2358409):

"yAxes": [{
  "ticks": {
    "callback": value => value.toFixed(1)
  },
  ...

Please take a look at the following runnable code and see how it works.

new Chart(document.getElementById('myChart'), {
  "type": "line",
  "data": {
    "datasets": [{
      "type": "line",
      "fill": false,
      "backgroundColor": "rgba(255, 24, 1, 1)",
      "borderColor": "rgba(255, 24, 1, 1)",
      "pointRadius": 0,
      "data": [67.0, 65.0, 70.0, 81.0, 83.0, 81.0, 79.0, 74.0, 78.0, 77.0],
      "label": "Output"
    }],
    "labels": ["00", "05", "10", "15", "20", "25", "30"]
  },
  "options": {
    "tooltips": {
      "intersect": false
    },
    "scales": {
      "xAxes": [{
        "gridLines": {
          "display": false
        }        
      }],
      "yAxes": [{
        "ticks": {
          "callback": value => value.toFixed(1)
        },
        "gridLines": {
          "display": false
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

0👍

The error you are getting is that its not valid json.

As to my knowledge JSON doesnt support functions so you will have to remove to callback and make sure the ticks are already correct before you send your data to image-chart.

If you remove the callback function it works fine: https://image-charts.com/chart.js/2.8.0?bkg=white&c={%22type%22:%22line%22,%22data%22:{%22datasets%22:[{%22type%22:%22line%22,%22fill%22:false,%22backgroundColor%22:%22rgba(255,%2024,%201,%201)%22,%22borderColor%22:%22rgba(255,%2024,%201,%201)%22,%22pointRadius%22:0,%22data%22:[67.0,65.0,70.0,81.0,83.0,81.0,79.0,74.0,78.0,77.0],%22label%22:%22Output%22}],%22labels%22:[%2200%22,%2205%22,%2210%22,%2215%22,%2220%22,%2225%22,%2230%22]},%22options%22:{%22tooltips%22:{%22intersect%22:false},%22scales%22:{%22xAxes%22:[{%22gridLines%22:{%22display%22:false}}],%22yAxes%22:[{%22gridLines%22:{%22display%22:false}}]}}}

If you really need the functionality of the callback you will have to implement the normal version of the lib, in there your original config is working as intended.

Leave a comment