change column/bar/area series datapoint's color of columnseries chart in silverlight

change column/bar/area series datapoint's color  in silverlight:

  Your Final output will be like this.
Xaml Code:
     Add the Following Code in your xaml

<toolkit:Chart Canvas.Top="80" Canvas.Left="10" x:Name="chart_name" Margin="88,68,312,114">          
            <toolkit:Chart.Series>
                <toolkit:ColumnSeries Title="week1" IndependentValueBinding="{Binding Path=Value}" DependentValueBinding="{Binding Path=Key}">
                    <toolkit:ColumnSeries.DataPointStyle>
                        <Style TargetType="toolkit:DataPoint">
                            <Setter Property="Background" Value="Red"/>
                        </Style>
                    </toolkit:ColumnSeries.DataPointStyle>
                </toolkit:ColumnSeries>

                 <toolkit:ColumnSeries Title="week2" IndependentValueBinding="{Binding Path=Value}" DependentValueBinding="{Binding Path=Key}">
                    <toolkit:ColumnSeries.DataPointStyle>
                        <Style TargetType="toolkit:DataPoint">
                            <Setter Property="Background" Value="Yellow"/>
                        </Style>
                    </toolkit:ColumnSeries.DataPointStyle>
                </toolkit:ColumnSeries>
               
               <toolkit:ColumnSeries Title="week3" IndependentValueBinding="{Binding Path=Value}" DependentValueBinding="{Binding Path=Key}">
                    <toolkit:ColumnSeries.DataPointStyle>
                        <Style TargetType="toolkit:DataPoint">
                            <Setter Property="Background" Value="Blue"/>
                        </Style>
                    </toolkit:ColumnSeries.DataPointStyle>
                </toolkit:ColumnSeries>
            </toolkit:Chart.Series>
        </toolkit:Chart>


Use the following NameSpace:

   using System.Windows.Controls.DataVisualization.Charting;
 
C# code:

     ((ColumnSeries)chart_name.Series[0]).ItemsSource = new KeyValuePair<Double, String>[]
            {
            new KeyValuePair<Double, String>(15,"Week 1"),
            new KeyValuePair<Double, String>(20,"Week 2"),
            new KeyValuePair<Double, String>(40,"Week 3"),
            new KeyValuePair<Double, String>(70,"Week 4")
            };
            ((ColumnSeries)chart_name.Series[1]).ItemsSource = new KeyValuePair<Double, String>[]
            {
            new KeyValuePair<Double, String>(25,"Week 1"),
            new KeyValuePair<Double, String>(35,"Week 2"),
            new KeyValuePair<Double, String>(40,"Week 3"),
            new KeyValuePair<Double, String>(10,"Week 4")
            };
            ((ColumnSeries)chart_name.Series[2]).ItemsSource = new KeyValuePair<Double, String>[]
            {
            new KeyValuePair<Double, String>(35,"Week 1"),
            new KeyValuePair<Double, String>(15,"Week 2"),
            new KeyValuePair<Double, String>(35,"Week 3"),
            new KeyValuePair<Double, String>(40,"Week 4")
            };      
 

Thats it.. You can add your own data,(You can also change the data type as per your needs)
    

Comments

Popular posts from this blog

SPFx with PnPJS CRUD Operations (V3)

Add content type to SharePoint List/Library using REST API

A type named 'SP.Data. could not be resolved by the model error