Change Kendo Chart tooltip text color using CSS/JavaScript

Question

All of my chart's tooltip's text colors are black, which doesn't work well with my chart colors. I've been trying to change the color to white using CSS, but somehow it doesn't change.

I'm looking for a solution which applies a color to all charts on my screen.

Inspecting the element source of one of the tooltips, shows me this:

<div class="k-tooltip k-chart-tooltip" style="font: 12px/normal Arial,Helvetica,sans-serif; border: 1px solid rgb(255, 0, 0); border-image: none; left: 497px; top: 368px; position: absolute; font-size-adjust: none; font-stretch: normal; opacity: 1; background-color: rgb(255, 0, 0);">70.25%</div>

I've tried a few things, like:

.k-chart .k-tooltip {
    color: white !important;
}
.k-tooltip.k-chart-tooltip {
    color: white !important;
}
.k-chart-tooltip {
    color: white !important;
}

You can set color in jQuery, see example http://jsfiddle.net/nmcLh0x1/1/. If you are using MVC wrapper for kendo-chart then also tooltip options are available. — 111, Apr 07 '15 at 07:37
I need something which I can set once, after which it applies to all charts on my page, so I don't want to set the same tooltip options for each chart. I suppose a JQuery script would work though, but I can't access JSFiddle.net from here at work. — Nic, Apr 08 '15 at 03:43

111 · Accepted Answer · 2015-04-08T06:27:47.437

Using CSS, set this class for styling

.k-tooltip,.k-chart-tooltip
{
     color: white;
}

Or

Using jQuery, you can set kendo chart tooltip color, same you can do with mvc wrapper JSFiddle

        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Title"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "line",
                    style: "smooth"
                },
                series: [{
                    name: "Series1",
                    color: "red",
                    data: [50, 100]
                },{
                    name: "Series2",
                    color: "blue",
                    data: [null, 100, 150]
                }],
                valueAxis: {
                    labels: {
                        format: "{0:c}"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,  
                    font: "0.8em Segoe UI",
                    template: "#= series.name #: #= value #",
                    color: "white"
                }
            });
        }

        $(document).ready(createChart);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    
</div>

I'm actually looking for a jQuery script (or CSS) which updates the tooltip color of all charts on the page. I'd rather not set the color manually for each chart, since I've got too many of them. — Nic, Apr 08 '15 at 04:33

score 0 · Answer 2 · answered Apr 08 '15 at 06:35

function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Title"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "line",
                    style: "smooth"
                },
                series: [{
                    name: "Series1",
                    color: "red",
                    data: [50, 100]
                },{
                    name: "Series2",
                    color: "blue",
                    data: [null, 100, 150]
                }],
                valueAxis: {
                    labels: {
                        format: "{0:c}"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,  
                    template: "#= series.name #: #= value #",
                   
                }
            });
        }

        $(document).ready(createChart);

.k-tooltip,.k-chart-tooltip
{
  color: white;
  font-size: 20px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    
</div>

Change Kendo Chart tooltip text color using CSS/JavaScript

2 Answers2