Next
Update
Prev
Default

You can display data labels with the format defined in the JavaScript function. To use the user-defined function for data labels in the column chart, you must set a JavaScript function name to the value of insideLabelJsFunction ( if labelPosition = "inside" ) attribute in the <Column2DSeries> or <Column3DSeries> element tags.

This sample column chart is to show how to define a JavaScript function to create the user-defined data label displayed inside the column, and to create the user-defined label for total value of each series.

The totalLabelJsFunction attribute in the <Column2DSet> element tag must be set to display the total value of each series.

If labelPosition = "outside", then you must set the outsideLabelJsFunction attribute.

...
<Column2DChart ...  >
'''
  <Column2DSet ... totalLabelJsFunction="totalLabelFunc" >
    <Column2DSeries ... labelPosition="inside" insideLabelJsFunction="seriesLabelFunc" styleName="seriesStyle" >
    ... 
    </Column2DSeries>
    <Column2DSeries ... labelPosition="inside" insideLabelJsFunction="seriesLabelFunc" styleName="seriesStyle" >
    ... 
    </Column2DSeries>
    <Column2DSeries ... labelPosition="inside" insideLabelJsFunction="seriesLabelFunc" styleName="seriesStyle" >
    ... 
    </Column2DSeries>
  </Column2DSet>
  ...
</Column2DChart>
<Style>>.seriesStyle{paddingTop:6;fontFamily:Arial;fontSize:11;color:0x0000FF;}
</Style>
...

function seriesLabelFunc(seriesID, index, data, values)
{
  return "$" + values[1];
}

function totalLabelFunc(seriesID, index, data, values)
{
  return "$" + values[1];
}

© 2017 KoolChart. All rights reserved.