Missing features: multi-line bar labels, labels within bars itself

[roberto]

These would be nice to have features:
1) multi-line bar labels on the bottom – see picture link below,
eg. 10 bars with text 2017-05-10 01:39pm

2) labels within the bar itself of bar graph, e.g. 5h or just 5 to identify the value shown, rather than having to just get the title of it while hovering

3) having a suffix take effect on the hover-over-bar label too. While it’s “4 hours in example below” on the vertical scale, it’s just a “4” in the hover message, the “suffix=hours” doesn’t apply to the label on hovering, just on the vertical scale

the picture example:
http://www.robertbody.com/temp/2017-05-10-canvasjs.jpg

[roberto]

[roberto]

And last point, if the value is 0.04xx, CanvasJS decides to add -1 to the scale… “-1 hours”.
That doesn’t make sense, and the “go into negatives” should be an option for some purposes, but not a default. “-1 hours” just doesn’t make sense, or “-$1000” for someone else’s uses.

At 0.05 however, the -1 disappears from the scale.

[Sanjoy]

Hi Roberto,

1) As of now line-breaks is not supported in labels. But for workaround you can look into labelMaxWidth.
2) Are you looking for indexLabel?
3) Using yValueFormatString you can format y values in both indexLabel or toolTip. If you like to format toolTip-content you can use toolTipContent in dataSeries level or by setting content in toolTip.
4) To start axisY from 0, you can set axisY.viewportMinimum to 0.

Here is an example.

[roberto]

Thanks for the responses

2)

indexLabel used in the picture above is above the bar, it would look better within the bar (unless the bar is too small).
The color of text clashes with the fill color of the bar (last bar above). That could be avoided with background just around the text, semi transparent would look best

There is no way to round off the Y value in the picture attached, since it’s going in as “{y}” in
indexLabel: “{y}”,
passing in “{y,2}” to round to 2 decimal places would be nice, or having the ability to use a function as a parameter, to round off to 2 decimals that way
The fiddle is very helpful

Having the text within the bar would be a nice future enhancement

[roberto]

also try this to see how bad the colors clash with foreground/background without having a separate background just for text, so the text always stands out, no matter the background of the bar:
var chart = new CanvasJS.Chart(“chartContainer”,
{
axisY:{
suffix: ” hours”,
viewportMinimum: 0,
viewportMaximum: 10
},
data: [
{
type: “column”,
indexLabel:”{y}”,
yValueFormatString: “#.## hours”,
dataPoints: [
{ x: 10, y: 7.32 },
{ x: 20, y: 10 },
{ x: 30, y: 0.01 },
{ x: 40, y: 6 },
{ x: 50, y: 9 },
{ x: 60, y: 6 },
{ x: 70, y: 2 },
{ x: 80, y: 10 },
{ x: 90, y: 10 }
]
}
]
});

[Bivek Singh]

@roberto

You can align the indexLabels inside bar / column using indexLabelPlacement. Similarly, background for indexLabels can be set using indexLabelBackgoundColor.

For formatting indexLabels, you can use indexLabelFormatter or you can format axisY values using yValueFormatString.

Please take a look at this jsFiddle.

—-
Bivek Singh