How to render histograms

[Cristi S.]

Histograms have usually no space between their bar/column shapes, like here below (on the right):

1) How can I set the bar/column shape width to the maximum allowed? I tried with dataPointWidth and dataPointMaxWidth, but it’s not optimum.

2) Also, how can I remove the left/right padding between the bars/columns and the Y axis, or at the right?

Thanks,
Cristian

[Vishwas R]

Cristian,

1) By setting dataPointWidth based on axis width and number of dataPoints in column chart, histogram chart can be rendered. Please check this JSFiddle.

2) You can remove left/right padding between column and axis by setting minimum/maximum.

—
Vishwas R
Team CanvasJS

[Cristi S.]

Thanks, Vish!

[Nancy Gale]

This fails when zooming in. Seems to need the visible x-axis and the visible number of datapoints. Is that possible?

[Vishwas R]

@nancy-gale,

When the chart is zoomed, you can find whether a dataPoint is within the viewport range or outside with the help of rangeChanged event.

rangeChanged: function(e) {
  var dpsWithinViewport = 0;
  for(var j = 0; j < e.chart.data[0].dataPoints.length; j++) {
    var dataPoint = e.chart.data[0].dataPoints[j];
    if(dataPoint.x >= e.axisX[0].viewportMinimum && dataPoint.x <= e.axisX[0].viewportMaximum) {
      dpsWithinViewport++;
    }
  }
  if(e.trigger === "reset")
    updateDataPointWidth(e.chart, e.chart.data[0].dataPoints.length);
  else
    updateDataPointWidth(e.chart, dpsWithinViewport);	
}

Please take a look at this JSFiddle for nearest possible solution to set the dataPointWidth by finding the number of dataPoints within the viewport range.

—
Vishwas R
Team CanvasJS