The chart legend can be created using the <SubLegend> element tag which is defined as a child node of the <Box> element tag.

Creating the chart legend using the <SubLegend> element tag provides a more flexible way than that of using the <Legend> element tag.

This sample chart is to show how to create the chart legend using the <SubLegend> element tag.

<Box horizontalAlign="center" direction="horizontal" markerHeight="15" markerWidth="15" >
  <SubLegend useVisibleCheck="true" width="100%" >
    <CheckableLegendItem targetSeries="{series1}" fill="0xff812d" label="Profit" />
    <CheckableLegendItem targetSeries="{series2}" fill="0xffd100" label="Cost" />
    <CheckableLegendItem targetSeries="{series3}" fill="0x81d733" label="Revenue" />


horizontalAlign The horizontalAlign attribute is to set the horizontal alignment of the sublegend items. The valid values are "left", "center" and "right".


width The width attribute determines how many percentage of the horizontal space will be used to create a chart legend.

© 2017 KoolChart. All rights reserved.