Stacked Bar Chart Different Bar Colours, Stacked Elements Lighter Colour

4 posts, 0 answers
  1. Martyn
    Martyn avatar
    18 posts
    Member since:
    Mar 2011

    Posted 22 Feb 2013 Link to this post

    I want to use RadChartView to create a stacked bar chart where each bar is given a different colour. This is OK, and I have achieved this by setting the Palette of the RadCartesianChart to be the Windows8 palette.

    However, I would like to stack another set of bars on top of the set that are already there, however, I would like the top stack of bars to be similarly coloured to the bottom set, but preferably a lighter shade of the bottom colour.

    Is there a way of getting the bars to do this?

    Thanks very much.

    Martyn.
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 27 Feb 2013 Link to this post

    Hi Martyn,

     You can achieve this by specifying custom Fill in your second bar series DefaultVisualStyle like this:

      <chartView:BarSeries.DefaultVisualStyle>
               <Style TargetType="Border">
                            <Setter Property="Background" Value="#501FA3EB"/>
                </Style>
    </chartView:BarSeries.DefaultVisualStyle>

    Other option would be to create your own palette of colors and add it to Chart where the second PaletteEntry is the one for your second Bar Series. Here's an example:

    <chart:RadCartesianChart.Palette>
                    <chartView:ChartPalette Name="PreparationPalette">
                        <chartView:ChartPalette.GlobalEntries>
                            <chartView:PaletteEntry Fill="#FF1FA3EB" />
                            <chartView:PaletteEntry Fill="#501FA3EB" />
                        </chartView:ChartPalette.GlobalEntries>
                    </chartView:ChartPalette>
    </chart:RadCartesianChart.Palette>

    I hope this information helps.

    Greetings,
    Evgenia
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Martyn
    Martyn avatar
    18 posts
    Member since:
    Mar 2011

    Posted 28 Feb 2013 Link to this post

    Hello Evgenia,

    Thank you for your reply, but that will not achieve what I am looking to achieve, I think my initial question may have been worded ambiguously.

    What I am looking to do is have the first series use a set of colours, for example: Red, Green, Blue, Yellow.

    Then I want to have the second bar series use a palette of colours which are of a lighter shade than the corresponding bottom bars, so Light Red, Light Green, Light Blue, Light Yellow.

    I think, your answer will give just two colours, one colour for the bottom series and a different colour for the top series.

    Is what I am trying to achieve possible in RadChartView?

    Thanks very much,

    Martyn.
  5. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 05 Mar 2013 Link to this post

    Hi Martyn,

    Currently the ChartView does not provide an out-of-the-box way of achieving your requirement. To solve your problem, you can find the visual elements that represent the bars of the series you want to fade-out, and set their opacity to 0.8.

    I have attached a sample project to help you get started. Note that I am using the Series.PaletteMode property, which was introduced with Q1 2013 release, so make sure your project is referencing binaries with that version.

    Let us know if you have any further questions.

    Regards,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top