Formatting Bar Chart legend to short date

3 posts, 0 answers
  1. Shawn
    Shawn avatar
    42 posts
    Member since:
    Jul 2016

    Posted 23 Feb Link to this post

    I have a Bar Chart using a DateTime as a series group.  Everything works as I expected, but the legend values appear as the long UTC format as shown in the attached screenshot.  How to I get this to format to a short date (i.e. Thu Feb 16 2017).

    <div class="panel panel-default">
        <div class="demo-section k-content wide">
            @(Html.Kendo().Chart<CBECloudBO2.ViewModels.ChartHourlySales7Day>()
                    .Name("chartHourlySales7Days")
                    .Title("Hourly Sales 7-day Comparitive")
                    .DataSource(datasource => datasource
                        .Read(read => read.Action("Chart_HourlySales7Day", "Home"))
                        .Group(group => group.Add(model => model.SaleDate))
                        .Sort(sort => sort.Add(model => model.Hour).Ascending())
                        )
                    .Legend(legend => legend.Visible(true))
                    .ChartArea(chartArea => chartArea.Background("transparent"))
     
            .Series(series =>
            {
                series.Column(model => model.Value).Name("#= group.value #").CategoryField("Hour");
            })
            .CategoryAxis(axis => axis
                .Name("series-axis")
                .Title("Store Hour")
                .Categories(p => p.Hour)
            )
            .ValueAxis(axis => axis
                .Numeric()
                .Title("Sale Totals")
                .AxisCrossingValue(0, int.MinValue)
            )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0}%")
                .Template("#= series.name #: #= value #")
            )
            )
        </div>
    </div>

     

    Regards,

    Shawn

  2. Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 24 Feb Link to this post

    Hi Shawn,

    You can specify a template for the legend labels and use kendo.toString() to format the date within it.

    Here is a Dojo showing this approach: 
    http://dojo.telerik.com/@tsveti/aYOwA/3


    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Shawn
    Shawn avatar
    42 posts
    Member since:
    Jul 2016

    Posted 24 Feb Link to this post

    Tsvetina,

    Thank you for getting back. I figured it was a Template method to use, but I was looking under Legend.  I did not see the Labels method.  All sorted now.

    Regards,

    Shawn

Back to Top