Legend Color change

[Mike Kacos]

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

               }

           });

[Iliana Dyankova]

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

[Sam Bronchetti]

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>

[Iliana Dyankova]

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

[Nathan]

Do we have any information on when this bug will be fixed?

[Iliana Dyankova]

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