i discovered apexcharts and so far im liking it, but i have 2 things that i want to see if its possible to do...
Here for example i created this chart using the chart creator the apexcharts provides, this is how it looks so far:
It has a gradient which i manually set the settings like this, to try to match the green area only until it hits the value 0 on the Yaxis and turn red when the yaxis is below 0:
The point is that below 0% it needs to be red, and over 0% it needs to be green, but if i change a value of one of the yaxis values to for example to 30 then the gradient doesnt auto adjust to follow this rule:
How i can do it, to force the gradient to stay red below 0% and green over 0%?
And the other thing is how can i add a data label on a specific point?
like for example only on the 3% i want a data label like this:
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
i discovered apexcharts and so far im liking it, but i have 2 things that i want to see if its possible to do...
Here for example i created this chart using the chart creator the apexcharts provides, this is how it looks so far:
It has a gradient which i manually set the settings like this, to try to match the green area only until it hits the value 0 on the Yaxis and turn red when the yaxis is below 0:
The point is that below 0% it needs to be red, and over 0% it needs to be green, but if i change a value of one of the yaxis values to for example to 30 then the gradient doesnt auto adjust to follow this rule:
How i can do it, to force the gradient to stay red below 0% and green over 0%?
And the other thing is how can i add a data label on a specific point? like for example only on the 3% i want a data label like this:
thanks!
and here is the code so far:
{ "chart": { "animations": { "enabled": false }, "background": "#fff", "dropShadow": { "left": -5, "blur": 3 }, "foreColor": "#373D3F", "fontFamily": "Poppins", "height": 308, "id": "V6oDh", "toolbar": { "show": false, "tools": { "selection": true, "zoom": true, "zoomin": true, "zoomout": true, "pan": true, "reset": true } }, "type": "area", "width": 588, "fontUrl": null }, "plotOptions": { "bar": { "borderRadius": 10 }, "radialBar": { "hollow": { "background": "#fff" }, "dataLabels": { "name": {}, "value": {}, "total": {} } }, "pie": { "donut": { "labels": { "name": {}, "value": {}, "total": {} } } } }, "dataLabels": { "style": { "fontSize": 8, "fontWeight": 700 } }, "fill": { "type": "gradient", "gradient": { "type": "vertical", "inverseColors": false, "colorStops": [ { "opacity": 0.2, "offset": 55, "color": "#72FF74" }, { "opacity": 0.2, "offset": 0, "color": "#FC7676" } ] } }, "grid": { "row": {}, "column": {}, "padding": { "right": 25, "left": 15 } }, "legend": { "fontSize": 14, "offsetX": -22, "offsetY": 0, "itemMargin": { "vertical": 0 } }, "markers": { "hover": { "size": 0, "sizeOffset": 6 } }, "series": [ { "name": "Area", "data": [ { "x": "Jan", "y": "0" }, { "x": "Feb", "y": "1" }, { "x": "Mar", "y": "3" }, { "x": "Apr", "y": "0.5" }, { "x": "May", "y": "-2" }, { "x": "Jun", "y": "-2.4" }, { "x": "Jul", "y": "-0.4" } ] } ], "stroke": { "lineCap": "round", "width": 4, "colors": [ "#5592A9" ], "dashArray": 2 }, "tooltip": {}, "xaxis": { "offsetY": 6, "labels": { "trim": true, "style": {} }, "axisBorder": { "show": false }, "axisTicks": { "show": false }, "tickAmount": "dataPoints", "title": { "text": "", "style": { "fontWeight": 700 } } }, "yaxis": { "tickAmount": 5, "labels": { "style": {} }, "title": { "style": { "fontWeight": 700 } } }, "theme": { "palette": "palette4" } }