Chart Tooltip - customize width but not globally

2 posts, 0 answers
  1. Chris
    Chris avatar
    1 posts
    Member since:
    Jul 2016

    Posted 16 Feb Link to this post

    Hi there,

    I have several Kendo charts (bar charts and line charts) with the data series bound to remote and grouped data. I am using the "shared" tooltip to display information on the grouped data together. However, I would like to change the width of the tooltip. I can of course do it globally by changing the Kendo chart tooltip CSS, but this is far from being a good solution because then it doesn't look good on other charts -- please see the enclosed jpg file.

    Question: Is it possible to change the CSS definitions (in particular "width") of the chart tooltip separately for every single chart?

    Any suggestions are welcome!

    -------------------------------------------------------------

    An example code below:

    @(Html.Kendo().Chart<AmeyQCMVC2.Models.ViewModels.BCIRatiosViewModel>()

            .Name("bciChart_DefectCategoryRatios")
            .DataSource(ds => ds.Read(read => read.Action("GetDefectCategoryBCIRatios", "Report"))
                                                  .Group(group => group.Add(model => model.ConditionIndex))
                                                  .Sort(sort => sort.Add(model => model.DefectCategory))
            )
            .Theme("Fiori")
            .Title("Component Condition Index per Defect Category")
            .Legend(legend => legend
                .Position(ChartLegendPosition.Right)
            )
            .ChartArea(chartArea => chartArea
                .Margin(15)
            )
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults.Bar()
            )
            .SeriesColors("limegreen", "yellowgreen", "gold", "tomato", "red")
            .Series(series =>
            {
                series.Bar(model => model.Ratio)
                      .Name("");
            })
            .CategoryAxis(axis => axis
                .Categories(model => model.DefectCategory)
                .MajorGridLines(lines => lines.Visible(true))
                .MajorTicks(lines => lines.Visible(true))
            )
            .ValueAxis(axis => axis.Numeric()
                .Title("Percentage of components")
                .Min(0)
                .Max(1)
                .MajorGridLines(lines => lines.Visible(true))
                .AxisCrossingValue(0)
                .Labels(l => l.Format("{0:p0}"))
            )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Shared(true)
                .Format("{0:p2}")
                .Color("white")
                .Background("green")
                .Border(1, "green")
            )
            .ToClientTemplate()

    )

    -------------------------------------------------------------

    The viewmodel class is defined as follows:

       public class BCIRatiosViewModel
        {
            public string DefectCategory { get; set; }
            public int ConditionIndex { get; set; }
            public double Ratio { get; set; }
        }

  2. Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 20 Feb Link to this post

    Hello,

    The chart does not expose an option for the tooltip width but it should be possible to achieve this by using a template or sharedTemplate that contains an element with the required width - example.

    Regards,
    Daniel
    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.
Back to Top