We have a requirement where instead of showing a whole number we need to show a range in yAxis of nvd3 chart.

For example currently the yAxis values are 100, 200, 300.... 1000 or 150, 300, 450....1500. Instead of showing these whole number we need to show 0-99, 100-199.... 900-1000 or 0-149, 150-299, 300-449.... 1400-1500 etc.

The number of data points are always 10 in yAxis.

How can we achieve this solution ?

Example of a chart -

Here is the code :-

 this.chartOptionsProgress = this.ChartHelper.options({
      type: 'multiBarHorizontalChart',
      height: 400,
      margin: {
        top: 10,
        right: 50,
        bottom: 20,
        left: 200
      },
      showValues: true,
      showLegend: false,
      valueFormat: function (d) {
        if (d == 0.01) {
          return "*";
        } else {
          return self.numberFilter.transform(parseInt(d));
        }
      },
      color: function (i) {
        return self.ChartHelper.defaultColors[0];
      }
      },
      showXAxis: true,
      showYAxis: true,
      forceY: [0],
      yAxis: {
        axisLabelDistance: 40,
        margin: {
          top: 30
        },
        tickFormat: (d) => {
          return this.numberFilter.transform(parseInt(d));
        }
      },
      xAxis: {
        margin: {
          right: 100
        }
      }
    });