sencha Touch chart: Applying gradient color to line fill

Question

I am working on a mobile application that contains different line charts . 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.

Same question as on sencha forum; http://www.sencha.com/forum/showthread.php?158858-Applying-gradients-to-line-chart-fill-color. Mitchell told you to try this with CSS?! — adis, Feb 21 '12 at 10:14
where to try in css i tried a lot but did't get through...........:( — Nag, Feb 21 '12 at 11:07

score 0 · Answer 1 · edited May 23 '17 at 11:59

Check out this article: http://www.sencha.com/learn/learning-sencha-touch-charts/

sample styling with SASS:

chart {
  colors:   linear-gradient(45, rgb(212, 40, 40), rgb(117, 14, 14))
            linear-gradient(45, rgb(180, 216, 42), rgb(94, 114, 13))
            linear-gradient(45, rgb(43, 221, 115), rgb(14, 117, 56))
            linear-gradient(45, rgb(45, 117, 226), rgb(14, 56, 117))
            linear-gradient(45, rgb(187, 45, 222), rgb(85, 10, 103));

  background: linear-gradient(45, #444, #111);

  series {
    stroke-width: 2;

    &:nth-child(1) {
      fill: linear-gradient(0, rgb(212, 40, 40), rgb(117, 14, 14));
    }
    &:nth-child(2) {
      fill: linear-gradient(0, rgb(180, 216, 42), rgb(94, 114, 13));
    }
    &:nth-child(3) {
      fill: linear-gradient(0, rgb(43, 221, 115), rgb(14, 117, 56));
    }
    &:nth-child(4) {
      fill: linear-gradient(0, rgb(45, 117, 226), rgb(14, 56, 117));
    }
    &:nth-child(5) {
      fill: linear-gradient(0, rgb(187, 45, 222), rgb(85, 10, 103));
    }
  }

  axis {
    stroke: #555;
    fill: #555;

    label {
      fill: #eee;
    }

    title {
      fill: #eee;
    }
  }
}

Also note this earlies post: Sencha Touch Charts style

sencha Touch chart: Applying gradient color to line fill

1 Answers1