Skip to content

SyncfusionExamples/How-to-change-the-individual-appearance-of-the-WPF-Bar-Chart-SfChart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

How to change the individual appearance of the WPF Bar Chart (SfChart)?

This article describes how to change the individual appearance(color) of bar segment based on the corresponding YValues in WPF SfChart by following these steps:

Step 1: To change color for specific data point in chart you can refer this KB article.

Step 2: Also you can customize the interior color of the particular segment based on the respective Y value by using the converter in the CustomTemplate property of ColumnSeries as demonstrated in the following code example. The detailed explanation of this appearance customization can be found in this user documentation page.

[XAML]

<Grid>
        <Grid.DataContext>
            <local:ViewModel/>
        </Grid.DataContext>

        <Grid.Resources>
            <local:InteriorConverter x:Key="interiorConverter"/>
        </Grid.Resources>

        <chart:SfChart Margin="10">

            <chart:SfChart.PrimaryAxis>
                <chart:CategoryAxis LabelFormat="yyyy"></chart:CategoryAxis>
            </chart:SfChart.PrimaryAxis>

            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis></chart:NumericalAxis>
            </chart:SfChart.SecondaryAxis>

            <chart:ColumnSeries XBindingPath="Year" YBindingPath="India" ItemsSource="{Binding DataPoints}">
                <chart:ColumnSeries.CustomTemplate>
                    <DataTemplate>
                        <Canvas>
                            <Rectangle Fill="{Binding Converter={StaticResource interiorConverter}}" Height="{Binding Height}" Width="{Binding Width}" Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"></Rectangle>
                        </Canvas>
                    </DataTemplate>
                </chart:ColumnSeries.CustomTemplate>
                <chart:ColumnSeries.AdornmentsInfo>
                    <chart:ChartAdornmentInfo AdornmentsPosition="TopAndBottom" LabelPosition="Center" SegmentLabelContent="LabelContentPath" ShowLabel="True" >
                        <chart:ChartAdornmentInfo.LabelTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="{Binding Item.India}" Foreground="White" FontSize="11"></Label>
                                </StackPanel>
                            </DataTemplate>
                        </chart:ChartAdornmentInfo.LabelTemplate>
                    </chart:ChartAdornmentInfo>
                </chart:ColumnSeries.AdornmentsInfo>
            </chart:ColumnSeries>

        </chart:SfChart>
</Grid>

[C#]

public class InteriorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var ydata = (value as ColumnSegment).YData;
        Brush interior;

        interior = ydata > 0 ?
            new SolidColorBrush(Colors.Green) :
            new SolidColorBrush(Colors.Red);

        return interior;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

View Model

public class ViewModel
{
    public ViewModel()
    {
        this.DataPoints = new ObservableCollection<Model>();
        DateTime year = new DateTime(2005, 5, 1);

        DataPoints.Add(new Model() { Year = year.AddYears(1), India = 28, Germany = 31, England = 36, France = 39 });
        DataPoints.Add(new Model() { Year = year.AddYears(2), India = 25, Germany = 28, England = 32, France = 36 });
        DataPoints.Add(new Model() { Year = year.AddYears(3), India = 26, Germany = 30, England = 34, France = 40 });
        DataPoints.Add(new Model() { Year = year.AddYears(4), India = -27, Germany = 36, England = 41, France = 44 });
        DataPoints.Add(new Model() { Year = year.AddYears(5), India = -32, Germany = 36, England = 42, France = 45 });
        DataPoints.Add(new Model() { Year = year.AddYears(6), India = 35, Germany = 39, England = 42, France = 48 });
        DataPoints.Add(new Model() { Year = year.AddYears(7), India = -30, Germany = 38, England = 43, France = 46 });
    }

    public ObservableCollection<Model> DataPoints { get; set; }
}

public class Model
{
    public DateTime Year { get; set; }
    public double India { get; set; }
    public double Germany { get; set; }
    public double England { get; set; }
    public double France { get; set; }
}

Output:

Customized color for individual bar segment

See also:

Series customization in WPF SfChart

How-to-customize-the-chart-series-in-WPF-SfChart?

About

How to change the individual appearance of the WPF Bar Chart (SfChart))

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages