Formatting bar chart

6 posts, 0 answers
  1. Ian
    Ian avatar
    63 posts
    Member since:
    Jul 2017

    Posted 30 Jan Link to this post

    Here's my code. I have attached a screenshot of the resulting chart. I have a few questions...

    1. How do I remove the horizontal marks on the left axis?

    2. How do I remove the spacing between each bar?

    3. How do I make it always show '0' on the horizontal axis?

    <telerikChart:RadCartesianChart PaletteName="Light" SelectionPaletteName="LightSelected" Margin="10,10,10,10" Grid.Row="0" x:Name="hoursChart" BackgroundColor="White">
                    <telerikChart:RadCartesianChart.HorizontalAxis>
                        <telerikChart:NumericalAxis MajorStep="10" LineColor="White" MajorTickBackgroundColor="White"  />
                    </telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:RadCartesianChart.VerticalAxis>
                        <telerikChart:CategoricalAxis  GapLength="0" LineColor="Transparent"  MajorTickThickness="1" PlotMode="BetweenTicks" LabelFitMode="MultiLine"  ShowLabels="False" MajorTickBackgroundColor="#A9A9A9" />
                    </telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:RadCartesianChart.Series>
                        <telerikChart:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding SeriesData}" CombineMode="Stack" />
                        <telerikChart:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding SecondSeriesData}" CombineMode="Stack" />
                        <telerikChart:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding ThirdSeriesData}" CombineMode="Stack" />
                        <telerikChart:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding FourthSeriesData}" CombineMode="Stack" />
                    </telerikChart:RadCartesianChart.Series>
                    <telerikChart:RadCartesianChart.Palette>
                        <telerikChart:ChartPalette >
                            <telerikChart:ChartPalette.Entries>
                                <telerikChart:PaletteEntry  FillColor="#d12f23" StrokeColor="Transparent" />
                                <telerikChart:PaletteEntry FillColor="#eebc2c" StrokeColor="Transparent" />
                                <telerikChart:PaletteEntry FillColor="#b1a58f" StrokeColor="Transparent" />
                                <telerikChart:PaletteEntry FillColor="#86c4cd" StrokeColor="Transparent" />
                            </telerikChart:ChartPalette.Entries>
                        </telerikChart:ChartPalette>
                    </telerikChart:RadCartesianChart.Palette>
                </telerikChart:RadCartesianChart>
  2. Ian
    Ian avatar
    63 posts
    Member since:
    Jul 2017

    Posted 30 Jan in reply to Ian Link to this post

    I have fixed number one with the following on the CategoricalAxis...

    MajorTickBackgroundColor="Transparent"

     

     

  3. Ian
    Ian avatar
    63 posts
    Member since:
    Jul 2017

    Posted 30 Jan in reply to Ian Link to this post

    Another question...

    4) How can I change the font family of the numbers on the horizontal axis?

  4. Ian
    Ian avatar
    63 posts
    Member since:
    Jul 2017

    Posted 30 Jan in reply to Ian Link to this post

    I have fixed number by setting the stroke color on the bars to the same as the fill color.

    So only question 3 & 4 remaining. :)

  5. Ian
    Ian avatar
    63 posts
    Member since:
    Jul 2017

    Posted 31 Jan Link to this post

    aha... I made the axis always show zero by rounding the maximum up to the nearest major step and rounding the minimum down to the nearest major step.

    So, now I just need to know how to change the font of the tick numbers.

  6. Didi
    Admin
    Didi avatar
    250 posts

    Posted 01 Feb Link to this post

    Hello Ian,

    I am glad you have managed to solve questions 1, 2 and 3.

    Regarding to the 4th question: How can I change the font family of the numbers on the horizontal axis? I have tried different scenarios using a custom renderer but I could not find any suitable solution for this.

    Let me know if you have any additional questions or concerns.

    Regards,
    Didi
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top