Изменить цвет текста подсказки диаграммы Kendo с помощью CSS/JavaScript

Question

Все цвета текста подсказки моей диаграммы черные, что плохо работает с моими цветами диаграммы. Я пытаюсь изменить цвет на белый с помощью CSS, но почему-то это не меняется.

Я ищу решение, которое применяет цвет к всем диаграммам на моем экране.

Осмотрев источник элемент одного из всплывающих подсказок, показывает мне это:

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

Я попробовал несколько вещей, как:

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

Answer 1

Используя CSS, установите этот класс для укладки

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

Или

С помощью JQuery, вы можете установить кендо цветой диаграммы подсказку, то же самое можно сделать с помощью MVC обертки 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>