Home Forums Chart Support How to render histograms

How to render histograms

Viewing 5 posts - 1 through 5 (of 5 total)
  • #14684

    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?




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

    Histogram using Column Chart

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

    Vishwas R
    Team CanvasJS


    Thanks, Vish!


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



    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) {
      if(e.trigger === "reset")
        updateDataPointWidth(e.chart, e.chart.data[0].dataPoints.length);
        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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.