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

Question

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:

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).

user_10810169 · Answer

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/

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

1 Answers