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

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

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

Add content type to SharePoint List/Library using REST API