Series is a set of related data points that are plotted on a chart. By default, FlexChart displays a column chart with dummy data series at design-time. However, you need to provide the control with data to render the chart at runtime. In FlexChart, a series is represented by the Series class. Although, axis and chart type related properties are generally set on the whole chart, FlexChart also provides you AxisX, AxisY, ChartType, DataSource etc. for each series as well. This is helpful in scenarios such as rendering mixed charts, multiple axes etc. The Series class also provides the SeriesName property whose text value represents that chart series in the legend. In case of line chart and area chart, you can also handle the null values in data to avoid gaps in plotting the chart series by setting the InterpolateNulls property to true.

Add a Series

FlexChart lets you add a series using the following code:

<c1:FlexChart.Series>
        <c1:Series SeriesName="Sales" Binding="Revenue"/>
 </c1:FlexChart.Series>

//系列をチャートに追加して、それ (AxisY) を DataCollection の 'Sales' フィールドに連結します

this.flexChart1.Series.Add(new C1.WinUI.Chart.Series
{
 //Name property specifies the string to be displayed corresponding to this Series in Legend
 SeriesName = "Sales",
 Binding = "Revenue"
});
        

Hide a Series

FlexChart provides flexibility to hide or display a series on plot area as well as legend through the Visibility property. This property accepts values from SeriesVisibility enumeration which lets you show or hide the series completely and also gives you options to display a series in legend or in plot area only.

                  
//系列をチャートに追加して、それ (AxisY) を DataCollection の 'Sales' フィールドに連結します
this.flexChart1.Series.Add(new C1.WinUI.Chart.Series
 {
   //Name プロパティは、凡例の例列に対応して表示される文字列を指定します
   SeriesName = "Sales",
   Binding = "Sales",
   Visibility = C1.Chart.SeriesVisibility.Plot
 });
 

Style a Series

FlexChart provides the Style property of Series class to change the appearance of a series. For symbol charts such as scatter, line symbol etc., you can also change the markers, their size and style by setting the SymbolMarker, SymbolSize and SymbolStyle properties as showcased in the following code.

                       
// 系列のスタイルを設定します

 this.flexChart.Series[0].Style = new C1.WinUI.Chart.ChartStyle()
 {
   Stroke = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 0, 255))
  };
  this.flexChart.Series[0].SymbolMarker = SymbolMarker.Cross;
  this.flexChart.Series[0].SymbolSize = 20;