'How to set color area when value less than zero use Apexcharts
This is my script options, use apexcharts chart
And my script
var options = {
series: [{
name: 'Profit',
data: [{"x":"2021-08-29","y":0.23},{"x":"2021-08-30","y":-5.29},{"x":"2021-08-31","y":-0.02},{"x":"2021-09-01","y":5.38},...
}],
chart: {
type: 'area',
height: 350,
zoom: {
enabled: false
},
toolbar: {
show: false
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 2
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.45,
opacityTo: 0.9
},
},
plotOptions: {
area: {
colors: {
ranges: [
{
from: -100,
to: 0,
color: "#e85347" // Red color
},
{
from: 0,
to: 100,
color: "#1ee0ac" // Green color
}
]
},
columnWidth: "80%"
}
},
yaxis: {
labels: {
offsetX: 0,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false
}
},
xaxis: {
type: 'datetime',
tickAmount: 8,
labels: {
rotate: -45,
rotateAlways: true,
formatter: function(val, timestamp) {
return moment(new Date(timestamp)).format("DD MMM")
}
}
},
tooltip: {
shared: true
},
legend: {
position: 'top',
horizontalAlign: 'right',
offsetX: -10
}
};
var chart = new ApexCharts(document.querySelector("#portfolio_line"), options);
chart.render();
How to config when value less than zero so bar color will is Red color, and greater than 0 will is Green color
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|