Setting Tool tip label colors on a KendoUI Pie Chart

Question

I am using a .kendoChart() call to create my self a pie chart.

seriesColors: config.colors,
tooltip: {
    visible: true,
    template: function (e) {
        return shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0");
    }
}

Using seriesColors: config.colors I am overriding the normal color set that comes with Kendo UI. The problem with this is when the chart uses darker colors the label color in the tooltip on hover is always black and is very difficult to read. I am looking for a way to reference another color array, set the colors on bind or something similar to that.

Kendo UI handles the dark colors in the standard color set by changing the label colors to white automatically so there should be a way to do it.

I have done some research but I cannot find a good set of documentation for Kendo UI similar to what Microsoft usually releases.

Update:

Joe's response was very helpful but it did not quite get me there.

Using the Color: attribute I can indeed set the ToolTip text color on a global scale, but... what if I have a light yellow? Is there a way to specify directly what color the text should be on what background color?

Will Color: accept a function{} or array of colors somehow?

Thanks,

Thanks to Roc for showing me exactly what I was missing!

Note: I used 120 luma for my determining value of if I would use black or white.

score 4 · Answer 1 · answered Jul 30 '14 at 15:22

You can set this via the tooltip options (code below is from their dojo) right at the bottom I set the tooltips to #ff0000.

The documentation is pretty solid (if a little awkward to navigate)

http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-tooltip.background

        $("#chart").kendoChart({
            title: {
                position: "bottom",
                text: "Share of Internet Population Growth, 2007 - 2012"
            },
            legend: {
                visible: false
            },
            chartArea: {
                background: ""
            },
            seriesDefaults: {
                labels: {
                    visible: true,
                    background: "transparent",
                    template: "#= category #: \n #= value#%"
                }
            },
            series: [{
                type: "pie",
                startAngle: 150,
                data: [{
                    category: "Asia",
                    value: 53.8,
                    color: "#9de219"
                },{
                    category: "Europe",
                    value: 16.1,
                    color: "#90cc38"
                },{
                    category: "Latin America",
                    value: 11.3,
                    color: "#068c35"
                },{
                    category: "Africa",
                    value: 9.6,
                    color: "#006634"
                },{
                    category: "Middle East",
                    value: 5.2,
                    color: "#004d38"
                },{
                    category: "North America",
                    value: 3.6,
                    color: "#033939"
                }]
            }],
            tooltip: {
                visible: true,
                format: "{0}%",
              background: "#ff0000"
            }
        });

Joe, Your example is close to what I want and it lead me to color: rather than :background. Anyway, I was hoping to not define a single color for all text labels but rather a color for each. I tried - `color: function (e) {` ` return e.tooltipTextColor;` `}` But that does not work. tooltipTextColor is something that is set up in kendo datasource schema: According to the documentation the only thing that is allowed in color: is a color string. — Toby, Jul 30 '14 at 16:59

score 1 · Accepted Answer · edited May 23 '17 at 12:07

You were very close to the solution in your question since you can use a function delegate as a template. Kendo tooltip is a div element, so just return an html block with the color you need and the tooltips will be white text on the dark background or a black text on the light background.

To detect if the background is too dark you can use the following thread How to check if hex color is "too black"? agains the series color from the "e" object - e.series.color. I used an abstract function getColorLuma() below to avoid duplication.

seriesColors: config.colors,
tooltip: {
    visible: true,
    template: function (e) {
        var textColor = getColorLuma(e.series.color) < 128 ? 'white' : 'black';
        return '<span style="color:' + textColor + '">' +  
          shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0") +
          '</span>';
    }
}

But be careful with the using ' and # in the text returned from the template function. Javascript will crash. I just used 'white' and 'black' in my code instead of hex colors.

Setting Tool tip label colors on a KendoUI Pie Chart

Update:

2 Answers2