使用CSS / JavaScript更改Kendo Chart工具提示文本的颜色

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;
}

Answer 1

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> 

Answer 2

 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>