This is a migrated thread and some comments may be shown as answers.

Legend Color change

5 Answers 447 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Mike Kacos
Top achievements
Rank 1
Mike Kacos asked on 12 Mar 2012, 04:51 PM
Hello, I have a chart on my page, and I'm trying to change one column color (the black theme is applied, and unfortunately the first two colors appear to be blue and a lighter blue).  I've used the code below and I have successfully changed the color of one column, however the legend does not reflect the color change.  It shows black as opposed to the violet which is displayed in the column.  
$("#reqcovmre").kendoChart({
               theme: $(document).data("kendoSkin") || "black",
               title: {
                   text: "MRE Rations Requirements Coverage"
               },
               legend: {
                   position: "bottom"
               },
               seriesDefaults: {
                   type: "column"
               },
               series: [{
                   name: "Requirement",
                   data: [11044800, 12304800]
               }, {
                   name: "Production",
                   data: [9759443, 44415115],
                   color: "violet"
               }],
               valueAxis: {
                   labels: {
                       format: "{0:N0}"
                   },
                   majorUnit: 10000000
               },
               categoryAxis: {
                   categories: ["PEACETIME", "SURGE"]
               },
               tooltip: {
                   visible: true,
                   format: "{0:N0}"
               }
           });

5 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 14 Mar 2012, 01:05 PM
Hello,

I believe that the problem is caused by colors' definition - try to specify them using their RGB or HEX codes.


Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sam Bronchetti
Top achievements
Rank 1
answered on 04 Apr 2013, 12:18 PM
I have a similar issue using he colorField attribute and it contains the hex value for the color of the series.  The series color is fine, but the legend color appear to remain at the defaults.  The PriorColor and Current Color values are: #768ca3 and #b8c7d3

Here is the code:

<script >
       $(function () {
           $("#chartBilling").kendoChart({
               legend: {
                   position: "top",
               },
               dataSource: new kendo.data.DataSource({
                   transport: {
                       read: "api/YTDBillingTrends"
                   },
               }),
               series: [{ field: "PriorYear",
                    name: "Prior Year Bill Amount",
                    colorField: "PriorColor"
               },
               {
                   field: "CurrentYear",
                   name: "YTD Bill Amount",
                   colorField: "CurrentColor"              
               }],
               categoryAxis:{
                   field: "StatSeriesCategory"
               },
               valueAxis: [{
                   name: "Bill Amounts",
                   labels: { format: "{0:c}" }
               }],
               tooltip: {
                   visible: true,
                   //format: "Billing Total: {0:c}"
                   template: "#=category# ${series.name} Total: #=kendo.format('{0:C}', value)#"
               },
 
               title: {
                   text: "Billing",
                   font: "40px Arial"
          
               }
           });
       });
 
   </script>
0
Iliana Nikolova
Telerik team
answered on 08 Apr 2013, 11:27 AM
Hello Sam,

I have already replied to your support ticket with the same question, however I am pasting my reply here too so the other users who are following this thread can read it: 

The observed outcome is expected - by design the colorField is intended to set the color of a single point in the series, not to the entire series. Please note the legend's color match the series color. Hence in order to achieve the desired result you should set colors to the series through the series.color (as in this online demo) or trough the seriesColors (as shown here).

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nathan
Top achievements
Rank 2
answered on 01 Aug 2015, 05:37 PM
Do we have any information on when this bug will be fixed?
0
Iliana Nikolova
Telerik team
answered on 05 Aug 2015, 08:42 AM
Hello Nathan,

I am not quite sure if I understand correctly which bug you have in mind - as I mentioned in my previous reply, the observed outcome is by design. Could you please elaborate a bit more? 

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Mike Kacos
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Sam Bronchetti
Top achievements
Rank 1
Nathan
Top achievements
Rank 2
Share this question
or