conditionally changing sparkline color

Posted by: ed on 3 September 2019, 9:56 am EST

  • Posted 3 September 2019, 9:56 am EST

    I want to change the sparkline color based on the trend in the sparkline data. I have a hidden column in my flex grid with the slope of the trend, If the trend is positive I want the sparkline to be red and if the slope is 0 or negative I want the sparkline to be green.

    I have looked at the example for conditional styling in the Learn Wijmo site and I can make it work for other cells but can't make it work for the cells with sparklines.
    Thanks, Ed
  • Replied 3 September 2019, 8:38 pm EST

    Hi Ed,

    Please refer to the sample below that demonstrates the required behavior:

    https://stackblitz.com/edit/js-uujk6r

    Regards,
    Ashwin
  • Replied 4 September 2019, 5:57 am EST

    Thanks for your help. Is there any way to make the sparkline thicker?
  • Marked as Answer

    Replied 4 September 2019, 3:06 pm EST

    Hi Ed,

    You may use the stroke-width CSS property to increase the thickness of the sparklines:

    .wj-cell svg line {
    stroke-width: 2
    }


    ~regards
  • Replied 10 September 2019, 3:49 am EST

    Thanks Ashwin
  • Replied 10 September 2019, 3:17 pm EST

    You are welcome, Ed. Let me know if you face any other issues.

    ~regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels