Home Forums Feature Requests & Feedback Missing features: multi-line bar labels, labels within bars itself

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • #15077

    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:


    Missing Features - label within the bar itself


    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.


    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.


    Thanks for the responses

    labels above the bar
    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


    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”,
    suffix: ” hours”,
    viewportMinimum: 0,
    viewportMaximum: 10
    data: [
    type: “column”,
    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 }



    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

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

You must be logged in to reply to this topic.