LiveCharts ColumnSeries fill color

Question

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>

BionicCode · Accepted Answer · 2022-01-09T19:48:17.873

4

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
  }
};

edited Jan 09 '22 at 19:48

answered Sep 26 '19 at 20:48

BionicCode

1
4
28
44

I belive your solution works, but could you explain how to add specific color into my example? How to edit this code to add this `ColorsCollection` exactly in my solution? Because when i adding this lines of code as u mentioned (`lvc:ColorsCollection`) my chart dont show up – michasaucer Sep 27 '19 at 05:36
Can you please update your code with the `ColorsCollection` so that we can take a look at what is wrong? – BionicCode Sep 27 '19 at 07:09
@michasaucer Do you know how to change Single Column Colour? This example changes the whole Column Series. I need to change a single column colour on runtime. thank you – fatihyildizhan Dec 15 '19 at 13:16
sorry, i have no idea. I used LiveCharts for one project. – michasaucer Dec 15 '19 at 17:01
@fatihyildizhan Consider to use a dedicated `ColumnSeries` to achieve this. – BionicCode Dec 16 '19 at 10:29
@BionicCode I will be so happy if you can share an example. When I create dedicated ColumnSeries they all appear on single Label. – fatihyildizhan Dec 16 '19 at 13:32
@fatihyildizhan i belive you can post new question on SO for this problem and share a link here. When someone will have familiar problem they will find solution easier – michasaucer Dec 18 '19 at 06:12
@michasaucer You are right. I asked as a new question. I will be so happy if you can answer it. https://stackoverflow.com/questions/59390964/livecharts-columnseries-update-colours-on-runtime – fatihyildizhan Dec 18 '19 at 11:30
@fatihyildizhan I have provided a solution to your question which uses a `CartesianMapper` to set individual columns or chart points to a specific color. – BionicCode Dec 18 '19 at 22:45

LiveCharts ColumnSeries fill color

1 Answers1