Change color of LineSeries

Question

hoping someone can help. I've spent about 4hrs so far trying examples I've found on forums to do this to no avail. Below is my XAML code; I would think there would a be a simple way to insert a parameter to set the color, but I've not found one that works.

I've also tried code behind; all the examples I've found do not change anything.

<Grid>
    <charting:Chart Name="lineChart"
                                   Title="Stock" 
                                   VerticalAlignment="Top" 
                                   Margin="0,10,10,0" 
                                   Height="550">
        <charting:LineSeries Name="Price"
                                            Title="Price"  
                                            DependentValuePath="Value" 
                                            IndependentValuePath="Key"
                                            ItemsSource="{Binding [0]}"
                                            IsSelectionEnabled="True"/>
        <charting:LineSeries Name="SMA50" 
                                            Title="50 SMA"  
                                            DependentValuePath="Value" 
                                            IndependentValuePath="Key"
                                            ItemsSource="{Binding [1]}"
                                            IsSelectionEnabled="True"/>
        <charting:LineSeries Name="SMA200" 
                                            Title="200 SMA"  
                                            DependentValuePath="Value" 
                                            IndependentValuePath="Key"
                                            ItemsSource="{Binding [2]}"
                                            IsSelectionEnabled="True"/>
    </charting:Chart>
</Grid>

Here is my code that calls the window

private void bGraph_Click(object sender, RoutedEventArgs e)
{
    Graph g = new Graph();
    g.Show();

    List<KeyValuePair<DateTime, int>> listPrice = new List<KeyValuePair<DateTime, int>>();
    List<KeyValuePair<DateTime, int>> listSMA50 = new List<KeyValuePair<DateTime, int>>();
    List<KeyValuePair<DateTime, int>> listSMA200 = new List<KeyValuePair<DateTime, int>>();

    DateTime d = new DateTime(2000,1,1);

    for (int i = 1; i < 10; i++)
    {
        listPrice.Add(new KeyValuePair<DateTime, int>(d, i));
        listSMA50.Add(new KeyValuePair<DateTime, int>(d, i*2));
        listSMA200.Add(new KeyValuePair<DateTime, int>(d, i * 3));
        d = d.AddDays(1.0);
    }


    var dataSourceList = new List<List<KeyValuePair<DateTime, int>>>();
    dataSourceList.Add(listPrice);
    dataSourceList.Add(listSMA50);
    dataSourceList.Add(listSMA200);

    g.lineChart.DataContext = dataSourceList;


}

Any help would be awesome. It appears to me the windows form version of charting is a lot simpler to use than the WPF version.

Answer 1

You specify it with the DataPointStyle property:

<charting:LineSeries Name="Price"
                    Title="Price"  
                    DependentValuePath="Value" 
                    IndependentValuePath="Key"
                    ItemsSource="{Binding [0]}"
                    IsSelectionEnabled="True"
                    DataPointStyle="{StaticResource myDataPointStyle}" />

Which in this case I'm assuming is a static resource:

    <Style x:Key="myDataPointStyle" TargetType="{x:Type charting:LineDataPoint}">
        <Setter Property="Background" Value="Blue"/>
    </Style>

If you need to do this dynamically and don't want to use data binding then you can of course also do it programatically:

var style = new Style();
style.TargetType = typeof(LineDataPoint);
style.Setters.Add(new Setter(BackgroundProperty, Brushes.Blue));
this.Price.DataPointStyle = style;

Answer 2

I have no experience in charting but I would like to help out.

There are a few things that seem odd.

1. You are binding to a elements in the grids DataContext{Binding [0]} but it is never set.

2. You are new-ing a Graph class and trying to show it but it is not connected to the view in any way.

3. This should work in the constructor: (Setting the DataContext for the window because your view is binding to that)

   public MainWindow()
   {
       List<KeyValuePair<DateTime, int>> listPrice = new List<KeyValuePair<DateTime, int>>();
       List<KeyValuePair<DateTime, int>> listSMA50 = new List<KeyValuePair<DateTime, int>>();
       List<KeyValuePair<DateTime, int>> listSMA200 = new List<KeyValuePair<DateTime, int>>();
   
       DateTime d = new DateTime(2000, 1, 1);
   
       for (int i = 1; i < 10; i++)
       {
           listPrice.Add(new KeyValuePair<DateTime, int>(d, i));
           listSMA50.Add(new KeyValuePair<DateTime, int>(d, i * 2));
           listSMA200.Add(new KeyValuePair<DateTime, int>(d, i * 3));
           d = d.AddDays(1.0);
       }
   
   
       var dataSourceList = new List<List<KeyValuePair<DateTime, int>>>();
       dataSourceList.Add(listPrice);
       dataSourceList.Add(listSMA50);
       dataSourceList.Add(listSMA200);
   
       this.DataContext = dataSourceList;
   
       InitializeComponent();
   }
   

Update

This changes the stroke width but for some reason the color doesn't change.

    private void bGraph_Click(object sender, RoutedEventArgs e)
    {
        var style = new Style(typeof(Polyline));
        style.Setters.Add(new Setter(Polyline.StrokeProperty, Brushes.Red));
        style.Setters.Add(new Setter(Polyline.StrokeThicknessProperty, 5.0));

        ((LineSeries) lineChart.Series[0]).PolylineStyle = style;
        ((LineSeries) lineChart.Series[1]).PolylineStyle = style;
        ((LineSeries) lineChart.Series[2]).PolylineStyle = style;
    }