Possible to create area chart with negative value and color change?

[logemann]

Hi,

i need to create a area chart for stock 1day performance. I need to create something like this::

Of course only the charting part is of relevance here. Thanks for hints if Apex can do this.

[rosco54]

Here is a starting point at least, based on what I just scraped together from Googling. Not sure it's satisfactory though.

var options = {
chart: {
height: 380,
type: "area"
},
series: [
{
name: "Series 1",
data: [23, -7, -45, -8, 32, 45,20, 23, -7, -45, -8, -32, 45,-20, -23, -7, -45, -8, 32, 45,]
}
],
plotOptions: {
area: {
fillTo: origin,
}
},
colors: ['#00FFAF'], // Starting color greenish
fill: {
type: 'gradient',
gradient: {
gradientToColors: ['#FF0000'], // Finishing color red
opacityFrom: 1,
opacityTo: 1,
stops: [0,100,100,100]
}
},
stroke: {
width: 0
},
xaxis: {
categories: [
"01 Jan",
"02 Jan",
"03 Jan",
"04 Jan",
"05 Jan",
"06 Jan",
"07 Jan"
]
}
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

[logemann]

thanks. Will give it a try later today...

[logemann]

apart from the missing zero line, its pretty damn near. Perhaps i can work this even some more.

Currently the only thing i am struggling with is that gradient doesnt really help me and i am not able to define solid color stops so that i have green if vlaue > 0 and red if value <= 0

[Crakenar]

You can make two areas with
{ //rouge name: 'area down', type: 'area', fillTo: 'origin', data: [ {x: 0, y: 10}, {x: 1, y: 25}, {x: 2, y: 32}, {x: 3, y: 50} ], zIndex: 2 }, { //vert name: 'Area up', type: 'area', fillTo: 'origin', data: [ {x: 3, y: 50}, {x: 4, y: 57}, {x: 5, y: 86} ], },

[junedchhipa]

Upgrade to [email protected] and see this example

https://apexcharts.com/javascript-chart-demos/area-charts/negative/