'How to set zero for x-axis in apex charts?

I want to set zero for x-axis to be certain value(the first tick in the set) and based on whether the next x-axis tick is above or below it, i want to color the portion accordingly.

This is what I want to achieve:

enter image description here

edit: I have found that the best way to have positive and negative values is to simply take first value and then subtract it from every folowing tick. That way I get just the difference and zero is the initial value, which is what I want. But I still cannot figure out the colors(the function for "colors" property in fade and in chart are not working as expected).



Solution 1:[1]

You can use annotations to draw y-axis lines at specific points. The same for the x-axis lines.

annotations: {
  yaxis: [{
    y: 0
  }],
  xaxis: [{
    x: 0
  }]
}

Here is a link to the similar Question and Answers for you. https://github.com/apexcharts/apexcharts.js/issues/1771

And here is a doc on how to use annotations. https://apexcharts.com/docs/options/annotations/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1