Search
Labels in Charts

I. Line and Area Charts

In those types of charts you will typically set the labels that appear on chart data points in the constructor of the series that you use:

JavaScript  Copy Code

var labels = new Collections.List([
        "one", "two", "three", "four", "five", "six",
        "seven", "eight", "nine", "ten", "eleven", "twelve"
    ]);
    var series1 = new Charting.Series2D(new Collections.List([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]), new Collections.List([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), labels);

 lineChart.series.add(series1);

 

II. Bubble Charts

The Bubble chart control requires series of type Series3D, where you an also set the labels:

JavaScript  Copy Code

var series3D1 = new Charting.PointSeries3D(new Collections.List([
        new Charting.Point3D(0.32, 81, 9.5 * 10),
        new Charting.Point3D(0.39, 66, 7.8 * 10),
        new Charting.Point3D(0.75, 65, 7.6 * 10),
        new Charting.Point3D(0.49, 60, 7.1 * 10)
    ]), new Collections.List(["Germany", "France", "UK", "Italy"]));


var data = new Collections.ObservableCollection();
    data.add(series3D1);
    chart.series = data;

 

III.  Pie Charts

Pie charts use inner and outer labels. If you don't want certain labels to appear provide null to the PieSeries constructor:

JavaScript  Copy Code

pieChart.series = new Charting.PieSeries(values, new Collections.List(["20", "30", "10", "40"]), new Collections.List(["twenty", "thirty", "ten", "forty"]));

    

IV. Bar Charts

Bar charts can have top and inner labels, which you set in the constructor of the BarSeries class. If you don't want any of those labels provide an empty list or null.

JavaScript  Copy Code

var labels = new Collections.List([
        "one", "two", "three", "four", "five", "six",
        "seven", "eight", "nine", "ten", "eleven", "twelve"
    ]);

var topLabels = new Collections.List([
        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ]);

    // create sample data series
    var series = new Collections.ObservableCollection(new Array(new Charting.BarSeries(new Collections.List([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), labels, topLabels)));

 

V. Radar Charts

Radar charts also get their labels from the labels property of the Series class used to provide data. Here is how you'll set labels at data points in a radar using a SimpleSeries class:

JavaScript  Copy Code

var data = new Collections.ObservableCollection();
    var series1 = new Charting.SimpleSeries(new Collections.List([20, 30, 43, 40, 44, 37, 35, 51]), new Collections.List(["20", "30", "43", "40", "44", "37", "35", "51"]));
    var series2 = new Charting.SimpleSeries(new Collections.List([12, 40, 23, 30, 34, 47, 45, 21]), new Collections.List(["12", "40", "23", "30", "34", "47", "45", "21"]));
    data.add(series1);
    data.add(series2);
    radarChart.series = data;

The radar chart with all types of labels:

 In all chart types you can hide the labels by using:

 
JavaScript  Copy Code

chart.showDataLabels = false;