Skip to content

Serie Label

This option applies only to Bars, Multimetric Bars, and Tree Map. It renders the corresponding metric value of each bar, stacked bar, cluster bar or Tree Map tile. 

1
2
3
4
myChart.set('serieLabel', {
    show: true,
    position: 'inside'
})

Here we can see metric values inside each bar:

Stacked

Serie Label Options

  • show: shows label or not. This is a boolean value. Default is false.

  • position: sets the label position, it can be an array representing the top-left corner of bounding box [10, 10] or pecentage values as ['5%', '5%']. Fit positions are: top, left, right, bottom, inside, insideLeft, insideRight, insideTop, insideBottom, insideTopLeft, insideBottomLeft, insideTopRight, insideBottomRight. Default value is inside.

  • rotation: allows to rotate label from -90 to 90 degree, positive value represents rotate anti-clockwise. Default value is 0.

  • formatter: allows to format the label value, which supports string template and callback function.

  • color: sets the text color. The default value can be black or white and it depends on the background color of the bars.

  • fontStyle: sets the font style. Available values are: normal, italic, oblique.

  • fontWeight: sets the font weight. Availables values are: normal, bold, bolder, lighter, 100, 200, 300, 400.

  • fontFamily: sets the font family. The default value is sans-serif.

  • fontSize: sets the font size. Default value is 12.

  • align: sets the horizontal alignment of the text, automatic by default. Availables are: left, center, right.

  • verticalAlign: sets the vertical alignment of the text, automatic by default. Availables are: top, middle, bottom.

  • backgroundColor: sets the background color of the text fragment. It can be a color string, like "#123234", "red", "rgba(0,23,11,0.3)". The default value is transparent.

  • borderColor: sets the border color of the text fragment. It can be a color string, like "#123234", "red", "rgba(0,23,11,0.3)". The default value is trsnaparent.

  • borderWidth: sets the border width of the text fragment

  • borderRadius: sets the border radius of the text fragment

  • padding: sets the padding of the text fragment, for example: [3, 4, 5, 6] represents the padding of [top, right, bottom, left] and [3, 4] represent [3, 4, 3, 4].