Chartist: Vary the background color of chart based on the y values

Question

I have currently using chartist to graph blood pressure. And i want the background color of the chart for y values greater than 140 mmHg to be red, 140-120 mmHg to be green, and below 120 mmHg to be blue. Is there any way to do this right now?

Answer 1

I think you can use ngClass to this case...

<style>
.blue{ background-color: blue }
.green{ background-color: green }
.red{ background-color: red }
</style>

<div ng-class="{'blue': y < 120, 'green': y > 120 && y < 140, 'red': y > 140}">
    content
</div>

being blue, green, red classes that would be added if the criteria matches.