Hover Series Labels and formatting Category Lables (MVC)

[Ian]

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();

[Iliana Dyankova]

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

[Ian]

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();

}

[Ian]

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

.CategoryAxis(axis => axis
    .Date()