github-actions[bot]
commented
2 months ago 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" } }