Need help with bar chart

5 posts, 0 answers
  1. Lâm
    Lâm avatar
    4 posts
    Member since:
    May 2017

    Posted 09 May Link to this post

     Hello everyone, for now I need create a bar chart like the image I have attached in a short time and I believe telerik will be the best solution for it. But unfortunately, after take a look in the document and try to implement a sample , I still cannot make it work , here is my code and I still have no idea what's wrong with them . Please help , thank you so much :)

     The problems are:
    1/Cannot change the fill color of the bar

    2/ Cannot add the the vertical line behind for each chart column

    3/I wonder If we can make the chart columt half-round like the design ? (It means that round in the head of column and flat in the tail)

    4/Gradient color for chart column

    var chart = new RadCartesianChartView(this);

    var customPalette = new ChartPalette(chart.Palette);

    var barEntry = customPalette.GetEntry(ChartPalette.BarFamily);
    barEntry.Fill = Color.Rgb(68, 163, 122);
    barEntry.AdditionalFill = Color.Rgb(118, 195, 169);
    barEntry.Stroke = 0;
    chart.Palette = customPalette;

    var verticalAxis = new LinearAxis();
    var horizontalAxis = new CategoricalAxis
    {
    LabelFormat = "%.0f"
    };
    var barSeries = new BarSeries
    {
    ValueBinding = new ValueBinding(),
    CategoryBinding = new CategoryBinding(),
    VerticalAxis = verticalAxis,
    HorizontalAxis = horizontalAxis,
    MaxBarWidth = 10,
    AreBarsRounded = true,
    RoundBarsRadius = 5,
    Data = getData()
    };
    var grid = new CartesianChartGrid();
    grid.MajorXLinesRenderMode = GridLineRenderMode.All;
    grid.LineThickness = 5;
    grid.LineColor = Color.Red;
    grid.MajorLinesVisibility = GridLineVisibility.X;
    chart.Grid = grid;

    chart.Grid.CanApplyPalette = true;
    chart.Series.Add(barSeries);
    barSeries.UpdatePalette(true);

  2. Lâm
    Lâm avatar
    4 posts
    Member since:
    May 2017

    Posted 09 May Link to this post

     I forgot to mention that I cannot change the fill color of the cartesian chart grid vertical line, too
  3. Lâm
    Lâm avatar
    4 posts
    Member since:
    May 2017

    Posted 09 May Link to this post

    And 1 last thing , do Telerik support drawn column by column ? . I mean that because my chart will load data in real time so I need to drawn column by column , not all at a time 
  4. Nikolay
    Admin
    Nikolay avatar
    14 posts

    Posted 12 May Link to this post

    Hello Trung,

    Thank you for contacting us.

    I will do my best to cover all your questions.

    1.I can confirm this is a reproducible issue and it is logged in our backlog. We will do our best o prioritize it for a future releases.

    2.It would be great if you can provide more information about the problem like the lines are not on the correct place or there is no lines at all?

    3.This is not supported behavior - you can control the border radius with the RoundBarsRadius property but it is applied on the both ends of the bar.

    4.Unfortunately gradient colors are not supported for the series.

    5.To change the color of the grid vertical line use the grid.VerticalLineColor property. If the color is still not applied please try to add the Grid to the Chart first and then apply your color. Here is an example:

    CartesianChartGrid grid = new CartesianChartGrid();
    chart.Grid = grid;
    grid.VerticalLineColor = Color.Red;

    6.We do not support drawing columns one by one - the columns are drawn all at a time.

    I hope I've been helpful.

    Regards,
    Nikolay
    Telerik by Progress
    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
  5. Lâm
    Lâm avatar
    4 posts
    Member since:
    May 2017

    Posted 14 May Link to this post

    Hello Nikolay , Thank you for your help :)
Back to Top