LiveCharts ColumnSeries update Colours on Runtime

Question

I am using LiveCharts 0.9.7 and 1.2.9 Geared Version on WPF to show population data on ColumnSeries.

Here is my scenario: At the beginning, I am filling Columns with Blue. I want to change the colour of a single Column's Value on runtime.

I tried to reach a single value with SeriesCollection[0].Values[0] but, there no Fill or Colour option, it is just Double.

I also tried to cast SeriesCollection[0] to ColumnSeries but, I couldn't achieve the result. Is it possible to update a single value's colour on runtime?

public SeriesCollection SeriesCollection { get; set; } = new SeriesCollection
{
  new ColumnSeries
  {
    Title = "Population of Bodrum",
    Values = new ChartValues<double> { 1500, 2500, 3700, 2000, 1000},
    Fill = Brushes.Blue
  }
};

I've found this, maybe it'll be helpful to you : https://stackoverflow.com/questions/54195346/different-colors-for-each-value-in-a-columnseries — AntiqTech, Dec 18 '19 at 13:13
I have added and updated a simple solution using a `CartesianMapper`. — BionicCode, Dec 18 '19 at 22:43

BionicCode · Answer 1 · 2019-12-18T23:05:54.213

You can specify a configuration by assigning a CartesianMapper to ColumnSeries.Configuration.

The following example changes the color of the third column of your given chart from blue to red:

public class ChartDataModel
{
  public ChartDataModel()
  {
    this.BlueSeries = new ColumnSeries()
    {
      Title = "Population of Bodrum",
      Values = new ChartValues<double> { 1500, 2500, 3700, 2000, 1000 },
      Fill = Brushes.Blue
    };
    this.SeriesCollection = new SeriesCollection() { this.BlueSeries };
  }

  private void ChangeThirdChartPointColorToRed()
  {
    CartesianMapper<double> mapper = Mappers.Xy<double>()
      .X((value, index) => index)
      .Y(value => value)
      .Fill((value, index) => index == 2 ? Brushes.Red : Brushes.Blue);

    // Dynamically set the third chart point color to red
    this.BlueSeries.Configuration = mapper;
  }

  // The actual chart data source
  public SeriesCollection SeriesCollection { get; set; }

  private ColumnSeries BlueSeries { get; set; }
}

You can also use the CartesianMapper to change the color of a point according to its y value by specifying a corresponding predicate. To draw all values that exceed a value of 2,000 red you could use the following mapper:

 CartesianMapper<double> mapper = Mappers.Xy<double>()
   .X((value, index) => index)
   .Y(value => value)
   .Fill((value, index) => value > 2000 ? Brushes.Red : Brushes.Blue);

LiveCharts ColumnSeries update Colours on Runtime

1 Answers1

Linked