Legend Color change

6 posts, 1 answers
  1. Mike Kacos
    Mike Kacos avatar
    28 posts
    Member since:
    Sep 2009

    Posted 12 Mar 2012 Link to this post

    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}"
                   }
               });
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 14 Mar 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Sam Bronchetti
    Sam Bronchetti avatar
    12 posts
    Member since:
    Sep 2012

    Posted 04 Apr 2013 Link to this post

    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>
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 08 Apr 2013 Link to this post

    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!
  6. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 01 Aug 2015 Link to this post

    Do we have any information on when this bug will be fixed?
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 05 Aug 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready