New Feature: Add Data Labels to Scatter Charts

[ReimaFrgos]

New feature to allow labels to be added on Scatter Charts. Should resolve issues #410 and #291

The following options are used for labelling scatter charts:

showLabel:true // Must be set to true or labels will not be shown
dataLabelFormatScatter: custom // Can be set to custom (default), customXY, or XY. 

There are 3 different formats that the label can be set as, and defined using dataLabelScatterFormat:

• custom - Any custom string, can be unique per plot. e.g. 'My Label'
• customXY - Any custom string with the XY plot coordinates appended. e.g. 'My Label (X,Y)'
• XY - Uses the XY plot coordinates as the label. e.g X, Y

For customXY and XY, the plot references are dynamic and will update if the underlying excel data is updated.

Data labels are applied to the Y-Values, and support multiple sets of data in the format.

var data = [
    { name:'X-Axis',    values:[10,12,32,47] },
    { name:'Y-Value 1', values:[13, 20, 21, 25], labels:['Red 1', 'Red 2', 'Red 3', 'Red 4'] },
    { name:'Y-Value 2', values:[21, 22, 25, 49], labels:['Blue 1', 'Blue 2', 'Blue 3', 'Blue 4'] }
];

You do not need to specify the labels object if using dataLabelFormatScatter: XY as only the values are used in the labels.

If using dataLabelFormatScatter: XY every plot point will be labelled.

If using dataLabelFormatScatter: custom or dataLabelFormatScatter: customXY you can choose to label only some plot points by passing in a blank label. Useful when plotting a large number of points e.g.

var data = [
    { name:'X-Axis',    values:[10,12,32,47] },
    { name:'Y-Value 1', values:[13, 20, 21, 25], labels:['Red 1', '', '', 'Red 4'] },
    { name:'Y-Value 2', values:[21, 22, 25, 49], labels:['Blue 1', 'Blue 2', 'Blue 3', ''] }
];

[gitbrent]

Thanks @ReimaFrgos !

Great job as usual. :-)

I've updated the Chart examples to demo this new feature.

[jsvishal]

Can this be added for Bubble Chart too?