Conditionally changing sparkline color

Conditionally changing sparkline color

Posted by: ed on 3 September 2019, 6:56 pm EST

• 

  ed

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 September 2019, 6:56 pm 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 September 2019, 5:38 am EST

  Hi Ed,

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

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

  Regards,
  
  Ashwin

• 

  ed

  • Post Options:
  • Link
    Copy

  Posted 4 September 2019, 2:57 pm EST

  Thanks for your help. Is there any way to make the sparkline thicker?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 September 2019, 12:06 am 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

• 

  ed

  • Post Options:
  • Link
    Copy

  Posted 10 September 2019, 12:49 pm EST

  Thanks Ashwin

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 September 2019, 12:17 am EST

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

  ~regards