ng-apexcharts is an implementation of apexcharts for angular. It comes with one simple component that enables you to use apexcharts in an angular project.
MIT License
310
stars
78
forks
source link
Conditional formatting on line chart on the basis of yaxis values #335
I am using apexchart library to render linechart in our client environment.
One of the requirement from client is line chart color should be according to below conditions
if y-axis value <= 0.25 : green
if y-axis value > 0.25 && <0.6 : Yellow
if y-axis value > 0.6 : red
but right now it is not behaving in this manner, I tried using gradient but it looks like it works on % basis let me show you output
I am using apexchart library to render linechart in our client environment. One of the requirement from client is line chart color should be according to below conditions
if y-axis value <= 0.25 : green if y-axis value > 0.25 && <0.6 : Yellow if y-axis value > 0.6 : red
but right now it is not behaving in this manner, I tried using gradient but it looks like it works on % basis let me show you output
and below id the code responsible for this - if (this.showGradient) { this.chartOptions.fill = { type: 'gradient', gradient: { shade: 'dark', shadeIntensity: 1, type: 'vertical', opacityFrom: 1, opacityTo: 1, colorStops: [ { offset: 10, color: "#ef5350", opacity: 1, }, { offset: 30, color: "#ffa726", opacity: 1, }, { offset: 50, color: "#ffca28", opacity: 1, }, { offset: 70, color: "#66bb6a", opacity: 1, }, ], } } }