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; }
}
1 Answer, 1 is accepted
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