Tutorial 3: Mixed Chart Graphics

This tutorial shows how to draw different types of chart graphics inside same Plot. Each Chart -derived component from the library is a Dashboard specialization that adds a single SeriesRenderer to the plot, e.g. BarChart adds a BarRenderer to its Plot by default. You can create additional renderers from different types and add them to a chart as in this example, or build a dashboard with multiple plots and renderers as demonstrated in next tutorial. The following sample code builds upon Tutorial 2, moving two of the Series to a LineRenderer.

1. Remove the low and high series and color assignments from previous tutorial code, leaving only open and close prices:

C#

// a series of daily opening prices
chart.Series.Add(
    new MySeries(stockPrices, PriceType.Open));

// a series of daily closing prices
chart.Series.Add(
    new MySeries(stockPrices, PriceType.Close));

// assign different colors to each series
chart.Theme.CommonSeriesFills = new List<Brush>
{
    new SolidBrush(Colors.Yellow),
    new SolidBrush(Colors.LightBlue)
};

2. Create a LineRenderer for the low and high prices:

C#

var minMaxSeries = new ObservableCollection<Series>
{
    new MySeries(stockPrices, PriceType.Low),
    new MySeries(stockPrices, PriceType.High)
};

var minMaxRenderer = new LineRenderer(minMaxSeries);

3. Set appearance attributes for the lines by setting renderer's SeriesStyle property. The Fills list here is only set for the legend items:

C#

minMaxRenderer.SeriesStyle = new PerSeriesStyle
{
    Strokes = new List<Brush>
    {
        new SolidBrush(Colors.Red),
        new SolidBrush(Colors.Green)
    },
    Fills = new List<Brush>
    {
        new SolidBrush(Colors.Red),
        new SolidBrush(Colors.Green)
    },
    StrokeThicknesses = new List<double> { 4 }
};

4. Add the new renderer to both chart's Plot and to the legend box:

C#

chart.Plot.SeriesRenderers.Add(minMaxRenderer);
chart.LegendRenderer.Content.Add(minMaxRenderer);

5. Running the example now should show line graphics on top of the bars: