Chart Title - Custom Formatting

2 posts, 0 answers
  1. Shuja
    Shuja avatar
    30 posts
    Member since:
    Mar 2011

    Posted 08 Dec 2014 Link to this post

    I've got a chart defined as:-

    @(Html.Kendo().Chart<WT_Portal_PMS2.Models.OpenClockSummary>()
           .Name("chart")
           .Title("Open Clocks by Weeks Waiting")
           .Theme("bootstrap")
           .Legend(legend => legend
               .Position(ChartLegendPosition.Top)
               .Visible(false)
           )
                       .DataSource(ds => ds.Read(read => read.Action("_BarChartp", "Summary")
                                  .Data("specFilter")
     
                       ))
           .Series(series =>
           {
               series.Column(model => model.Clocks, model => model.barColour);
     
     
     
           })
           .ChartArea(area => area
               .Height(350)
               .Background("transparent"))
           .CategoryAxis(axis => axis
               .Categories(model => model.CurrentWaitingBand)
               .Labels(labels => labels.Rotation(-90))
               .MajorGridLines(lines => lines.Visible(false))
           )
           .ValueAxis(axis => axis.Numeric()
               .Labels(labels => labels.Format("{0:N0}"))
               .Line(line => line.Visible(false))
           )
           .Tooltip(tooltip => tooltip
               .Visible(true)
               .Format("{0:N0}")
           )
     
                       )

    What I need to do is add a boostrap badge to the chart title, so each one of the charts has an easily idfentifiable reference number.
    E.g:-
    <span>Open Clocks by Weeks Waiting</span>  <span class="pull-right badge">C1</span>

    How can I put this markup into the title? Any attempt to add spans etc., result in javascript errors when the page is run.

    Thanks
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 10 Dec 2014 Link to this post

    Hello,

    Embedding HTML in chart elements is not supported as it actually uses SVG, Canvas or VML to render.

    Provided that you're using SVG rendering (default in supported browsers) you can use <tspan> elements to some extent in place of <span>.
    This will fail of some other rendering mode is in use.

    Note that you must be using a version from the latest internal builds for this to work.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top