Tenemos un requisito en el que, en lugar de mostrar un número entero, necesitamos mostrar un rango en el eje y del gráfico nvd3.

Por ejemplo, actualmente los valores de yAxis son 100, 200, 300.... 1000 o 150, 300, 450....1500. En lugar de mostrar estos números enteros, necesitamos mostrar 0-99, 100-199.... 900-1000 o 0-149, 150-299, 300-449.... 1400-1500, etc.

El número de puntos de datos es siempre 10 en yAxis.

¿Cómo podemos lograr esta solución?

Ejemplo de un gráfico -

Aquí está el código: -

 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 } } });