Range Bar Chart: bug dataPointMinWidth

[tedadradro]

Hi
While it is possible to specify a minimum Width for a DataPoint in a Range Bar chart, it has a weird behaviour.
in
https://canvasjs.com/javascript-charts/range-bar-chart/
using
dataPointMinWidth
produces TALLER bars, instead of having the minimum bar width
if this is intentional, you should consider adding
dataPointMinHeight

thanks

• This topic was modified 5 years, 5 months ago by tedadradro. Reason: typos

[Priyanka M S]

@tedadradro,

Width and height for dataPoints are distributed along axisX and axisY respectively. In case of bar charts, axes x and y are switched because of which the dataPoint’s width will increase vertically(and not horizontally).

__
Priyanka M S
Team CanvasJS

[tedadradro]

Hi Priyanka
as far as I can tell from the docs, there’s no property for datapoint min and max HEIGHT: (which translates in width in Bar Graphs) Max Width; Min Width
so in a very crowded bar chart, (ie, with hundreds of datapoints) most often the datapoints DISAPPEAR because they are so thin that they are less than 1 pixel, and you cannot increase their height (that again, corresponds to width in a bar chart)

• This reply was modified 5 years, 5 months ago by tedadradro.

[tedadradro]

Sample fiddle
jsfiddle.net/91s7ajL3

• This reply was modified 5 years, 5 months ago by tedadradro.

[Vishwas R]

@tedadradro,

Thanks for reporting the use-case. As of now, columns/dataPoints are getting disappeared when the values are pretty small compared to the axis range. In future versions, we will consider limiting the height of the column to a minimum pixel value so that it’s visible even in-case of smaller values.

—
Vishwas R
Team CanvasJS

[tedadradro]

I know, but that’s my real data. So there is currently no workaround?

[Vishwas R]

@tedadradro,

You can use scale-breaks to remove space between dataPoints and allow dataPoints accommodate more space within the plot-area. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[tedadradro]

Hi
Scale breaks are not applicable in this scenario, because if the range is just some hour more, this is the (weird) result:
https://jsfiddle.net/z7fmtxjr/

I fear DataPointMinHeight would be the only viable solution

• This reply was modified 5 years, 5 months ago by tedadradro.

[Vishwas R]

@tedadradro,

It’s not possible to set minimum-height of the column / bar, as of now. We will consider this behavior for future versions. However combination of Scalebreaks and Zooming / Panning would help you in this scenario. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[tedadradro]

Have you noticed what happens as soon as you expand the time range?
https://jsfiddle.net/pdv76swb/
(i just changed
viewportMaximum: (new Date(2018,11,05,4,0,0)).getTime(),
to
viewportMaximum: (new Date(2018,11,05,23,0,0)).getTime(),
to show you what happens as soon the viewport approaches a 24 hour period.

• This reply was modified 5 years, 5 months ago by tedadradro.
• This reply was modified 5 years, 5 months ago by tedadradro.
• This reply was modified 5 years, 5 months ago by tedadradro.

[Vishwas R]

@tedadradro,

As mentioned earlier it’s not possible to have minimum height of the column / bar as of now. However by setting axis range to a smaller value by keeping difference between viewportMinimum and viewportMaximum smaller along with adding scale-breaks, dataPoints can be made visible which helps you visualize better.

—
Vishwas R
Team CanvasJS

[tedadradro]

Hi Vishwas
I have a dataset consisting of more than 17’000 datapoints (the fiddle is a simplification) and my customer needs a 24h viewport with all the data.
The logical answer is that CanvasJS is not able to represent such data at the moment I fear.

[tedadradro]

…your lack of answers seems to confirm the above..

[tedadradro]

Two months.. any update?
Thanks

[Indranil]

@tedadradro,

Thanks for your patience. We are working on some important update at this point. Hoverever, we have added your request to our list and will be fixing it in our future releases.

___________
Indranil Deo,
Team CanvasJS