Need help adding decimals to yaxis values

๐Ÿ‘:1

Here is jsfiddle Adding decimal places to chart.js axis

var barChartData = {
  labels: ["2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"],
  datasets: [{
    label: "Data 1",
    lineTension: 0,
    borderColor: "rgba(0,145,179,1)",
    pointRadius: 0,
    fill: false,
    borderWidth: 2,
    data: [18, 24, 21, 17, 9, 13, 8.5, 10, 9.5, 13, 5]
  }]
};
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
  type: 'line',
  data: barChartData,
  options: {
    legend: {
      position: "bottom",
      bezierCurve: false,
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          callback: function(value, index, values) {
            return value.toFixed(2);
          },
          fontColor: "rgba(0,0,0,0.6)",
          fontStyle: "normal",
          fontSize: "15",
          beginAtZero: true,
          padding: 7,
          max: 30,
          min: 0,
          stepSize: 5
        },
        scaleLabel: {
          display: true,
          labelString: 'Maternal Deaths per 10.000 Deliveries',
          fontSize: 18,
          padding: 30
        },
        gridLines: {
          drawTicks: false,
          display: true
        }
      }],
      xAxes: [{
        gridLines: {
          drawTicks: false,
          display: false,
          zeroLineColor: "transparent"
        },
        ticks: {
          padding: 7,
          fontColor: "rgba(0,0,0,0.6)",
          fontStyle: "normal",
          fontSize: "15",
        }
      }]
    }
  }
});

Leave a comment