Styling Chart Series

When you want different styling for each element in a single series e.g. each pie piece, bubble, scatter etc, the right way to do is to use the PerElementSeriesStyle class. The constructor can take up to four arguments, all of them optional.

Note
Each argument in the PerElementSeriesStyle is of type List that holds other List-s.

The logic is that the PerElementSeriesStyle class serves charts that  might use multiple series. Since the style property is one for all  series, it must provide a way to specify the style settings for all  elements in all series. The style settings are taken consequently in  the order they were added and applied to the series at the same index  as the index of the array with the styling properties.

Initialize brushes for each element in the series:

JavaScript

var brushes = new Collections.List([
        new Drawing.Brush("#f5ded0"),
        new Drawing.Brush("#e9ca91"),
        new Drawing.Brush("#87b3ab"),
        new Drawing.Brush("#ea684f"),
        new Drawing.Brush("#c0c0bc"),
 new Drawing.Brush("#877d75")
    ]);var seriesBrushes = new Collections.List();
    seriesBrushes.add(brushes);

Now the seriesBrushes variable is ready to be passed to the PerElementSeriesStyle constructor. Let's initialize one Brush for the outlining of each element. When the count of elements in the style settings array is less than the count of data in the series, the control cycles the styling settings. For the outlining, we'll use a single Bursh. Nonetheless we must put it in a nested array as well:

JavaScript

var pens = new Collections.List([
        new Drawing.Brush("white")
    ]);var seriesPens = new Collections.List();
  seriesPens.add(pens);

We repeat the same initialization for the thickness of the pens. We use  a pie chart and we want a thick pen:

JavaScript

var thicknesses = new Collections.List([
        10
    ]);
var seriesThicknesses = new Collections.List();
    seriesThicknesses.add(thicknesses);

If you want to set a special dash style, you can set it this way:

JavaScript

var dashStyles = new Collections.List([
        Drawing.DashStyle.Dash
    ]);
var seriesDashStyles = new Collections.List();
    seriesDashStyles.add(dashStyles);

The DashStyle enumeration lists different dash styles, which you can use. Now, let's assign the style to the chart.

JavaScript

pieChart.plot.seriesStyle = new Charting.PerElementSeriesStyle 
(seriesBrushes, seriesPens, seriesThicknesses, seriesDashStyles);

Don't forget to draw the chart:

JavaScript

pieChart.draw();

Here is the result: