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