Results 1 to 7 of 7

Thread: Applying gradients to line chart fill color

Hybrid View

Previous Post Previous Post   Next Post Next Post
    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Answers
    6
    Vote Rating
    5
      0  

    Default Applying gradients to line chart fill color

    Hi,
    I am working on a mobile application that contains different charts (like line, bar, column and pie). I have been trying to apply gradient colors to a line (single) chart fill color. But unfortunately i could not.

    Is it possible to apply color gradients to a line fill color? Please help.

    Thanks in advance,
    Nag

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,060
    Answers
    3976
    Vote Rating
    1389
      0  

    Default

    You should be able to style it with CSS.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Answers
    6
    Vote Rating
    5
      0  

    Default

    Hi Mitchell,
    fill: true, style:{fill:'#01DF01'} in series config option is filling with single color '#01DF01'. Where and how to apply CSS3 gradients in Ext.chart.Chart.
    Can you give sample code for applying gradient colors for line chart fill.

    Thanks in advance,
    Naga

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    34
    Vote Rating
    0
      0  

    Default

    any answer to this question. i am facing the same problem

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    7
    Vote Rating
    0
      0  

    Default

    you can write render in series

    renderer : function(sprite, storeItem, barAttr, i, store) {



    barAttr.fill = '003366';

    return barAttr;
    },

    try the above code .

  6. #6
    Sencha User
    Join Date
    Jan 2013
    Posts
    18
    Vote Rating
    0
      0  

    Default

    i have try above code but it not work for me.

  7. #7
    Sencha User
    Join Date
    May 2017
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by Naga View Post
    Hi,
    I am working on a mobile application that contains different charts (like line, bar, column and pie). I have been trying to apply gradient colors to a line (single) chart fill color. But unfortunately i could not.

    Is it possible to apply color gradients to a line fill color? Please help.

    Thanks in advance,
    Nag
    Naga, you can create gradient line chart using Chart.js library. It is very easy to learn and use. I wrote a detailed tutorial with lots of done examples, you can check it on my blog. Good luck!


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •