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

Helpdesk App using Power App

Add content type to SharePoint List/Library using REST API

Upload Single/Multiple file by using the REST API and jQuery SharePoint 2013