Make Columns fat when few used in MVC

2 posts, 0 answers
  1. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2013 Link to this post

    When my column chart is rendered with a few data points, they look thin and widely spaced apart. Have a look at the Current_state.png. I want it to look like the desired_state.png 

    Here's my existing chart:

    Html.Kendo().Chart<AccountPerformance>(Model.Results)
        .Name("chartPCT")
        .Title("% Return")
        .Legend(legend => legend.Visible(false))
        .Series(series =>
                series.Column(model => model.Metrics.Return)
                      .Name(Model.ColumnTitle)
                      .Labels(false)
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Labels(labels => labels.Format("{0}%")))
        .CategoryAxis(axis => axis
                                  .Date()
                                  .MajorGridLines(builder => builder.Visible(false))
                                  .Categories(model => model.Observation)
                                  .Labels(labels => labels.Format("MMM")))
         .SeriesDefaults(builder => builder.Column().NegativeColor("#BE2D55").Color("#C0BD7F"))
         .Tooltip(tooltip => tooltip
              .Visible(true)
              .Color("white")
              .Background("black")
              .Format("{0:P2}")
              .Template("#= value #")
        )                             
                                       
        .Render();
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 23 Jul 2013 Link to this post

    Hello Ian,

    The bars' width depends on the gap / spacing. Hence in order to achieve the desired result you should adjust the aforementioned properties. For working example take a look at this online demo

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top