Search code examples
wpflivecharts

LiveCharts ColumnSeries fill color


I'm following this example from LiveChart's documentation. The code looks like this:

<lvc:CartesianChart Margin="20" Series="{Binding SeriesCollection}" LegendLocation="Left">
        <lvc:CartesianChart.AxisX>
            <lvc:Axis Title="Salesman" Labels="{Binding Labels}"></lvc:Axis>
        </lvc:CartesianChart.AxisX>
        <lvc:CartesianChart.AxisY>
            <lvc:Axis Title="Sold Apps" LabelFormatter="{Binding Formatter}"></lvc:Axis>
        </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>

And it looks perfect and will work perfectly for me, but there is one problem. How to change fill color of a ColumnSeries in this example? As I said before, I'd rather not implement another chart, because it works perfect for me, but I don't know how to change that Fill color.

I didn't find a similar question in SO.

EDIT

Working solution:

<lvc:CartesianChart Margin="20" Series="{Binding SeriesCollection}" LegendLocation="Left">
        <lvc:CartesianChart.SeriesColors>
            <lvc:ColorsCollection>
                <Color>Green</Color>
            </lvc:ColorsCollection>
        </lvc:CartesianChart.SeriesColors>
        <lvc:CartesianChart.AxisX>
            <lvc:Axis Title="Salesman" Labels="{Binding Labels}"></lvc:Axis>
        </lvc:CartesianChart.AxisX>
        <lvc:CartesianChart.AxisY>
            <lvc:Axis Title="Sold Apps" LabelFormatter="{Binding Formatter}"></lvc:Axis>
        </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>

Solution

  • You can define a set of Color objects in XAML which will implicitly map to ColumnSeries objects in declaration order:

    <lvc:CartesianChart x:Name="CartesianChart"
                        Series="{Binding SeriesCollection}">
      <lvc:CartesianChart.SeriesColors>
        <lvc:ColorsCollection>
          <Color>Red</Color>
          <Color>Orange</Color>
          <Color>LightSlateGray</Color>
        </lvc:ColorsCollection>
      </lvc:CartesianChart.SeriesColors>
    </lvc:CartesianChart>
    

    Or explicitly define the Fill of a ColumnSeries either in XAML or C#:

    public SeriesCollection SeriesCollection { get; set; } = new SeriesCollection
    {
      new ColumnSeries
      {
        Title = "Series A",
        Values = new ChartValues<double> { 10, 20, 30, 20, 10},
        Fill = Brushes.CornflowerBlue
      },
      new ColumnSeries
      {
        Title = "Series B",
        Values = new ChartValues<double> { 100, 200, 300, 200, 100 },
        Fill = Brushes.DarkOrange
      }
    };