Hover Series Labels and formatting Category Lables (MVC)

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

    Posted 19 Jul 2013 Link to this post

    My chart looks fairly good. 2 questions though. (See attached screen shot)

    1) How can I make the Series labels only appear when the mouse hovers?
    2) How do I format the Category Axis (Date) to "MMM d". My attempt below doesn't do anything to the date displayed.

    Html.Kendo().Chart<AccountPerformance>(Model.Results)
        .Name("chart")
        .Title("Market Value")
        .Legend(legend => legend.Visible(false))
        .Series(series =>
                series.Line(model => model.Metrics.MarketValue)
                        .Name(Model.ColumnTitle)
                        .Labels(false)
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels.Format("{0:C0}")))
        .CategoryAxis(axis => axis
            .Categories(model => model.ObservationDate)
            .Labels(labels =>
                {
                    labels.Format("MMM d");
                    labels.Rotation(45);
                } ))
        .Render();


  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 22 Jul 2013 Link to this post

    Hello Ian,

    Up to your questions:

    1. I am afraid this is not supported by Kendo UI Chart, however you may consider using a tooltip (as shown in this online demo);
    2. In order to achieve this you could use the following format: 
      //....
      .CategoryAxis(axis => axis
          //....
          .Labels(l=>l.Format("MMMM/dd"))
      )
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2013 Link to this post

    Hi lliana,

    Unfortunately formatting the horizontal dates to MMM d didn't make any change in the display .

    You can see from the newly attached screenshot that the dates appear crunched as "1/31/2013 12:00:00 AM" instead of "JAN 31"

    Here's my full chart:

    @{
        Html.Kendo().Chart<AccountPerformance>(Model.Results)
            .Name("chartMKT")
            .Title("Market Value")
            .Legend(legend => legend.Visible(false))
            .Series(series =>
                    series.Line(model => model.Metrics.MarketValue)
                          .Name(Model.ColumnTitle)
                          .Labels(false)
            )
            .ValueAxis(axis => axis.Numeric()
                                   .Labels(labels => labels.Format("{0:C0}")))
            .CategoryAxis(axis => axis
                                      .Categories(model => model.ObservationDate)
                                      .Labels(labels => labels.Format("MMMM/dd"))
                                      )
            .SeriesDefaults(builder => builder.Line().Color("#005984"))
            .Tooltip(tooltip => tooltip
                  .Visible(true)
                  .Format("{0:C}")
                  .Color("white")
                  .Background("black")
                  .Template("#= value #")
            )
             .Render();
    }
  7. Answer
    Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2013 Link to this post

    I found a solution. You need to add .Date() to the CategoryAxis to have the value format correctly:

    .CategoryAxis(axis => axis
        .Date()
  8.
Back to Top