Search code examples
cssapexcharts

Apex area chart background not working as wanted

I have this chart that needs to be exactly 150px in height and has to have a background that is exactly behind the chart - meaning zero pixels left or right, up or down than the chart itself goes. Like this:

graph with annotations

...except this graph is too short. To achieve this I used annotations option and inside fillColor, but there are a couple of drawbacks:

  • background loads after the graph
  • i can't predict the maximum of y2 value
  • the graph is too short (which has nothing to do with annotations themselves)

There is the option sparkline which is great except it cuts the line at the top in half:

graph with sparkline Here background is added with css to the div container.

  • height is correct
  • graph is the same in size as background
  • line at the top is half the width it should be

So this option would be perfect if the line at the top wasn't for some reason cut in half the width. Is there a way to get around that?

This is how it looks without these options:

enter image description here

  • height is correct
  • line at the top remains the correct width
  • graph itself is smaller than the background which I dont want.

Here background is added with css to the div container.

Can anyone please help, suggest which options to try?

Solution

  • I have found a workaround that mostly solves the issue:

    • add sparkline: {enabled: true }
    • add title: { text: '', style: { fontSize: '10px'} }

    Empty title will give some space at the top and the line there will remain its width. However, the line at the bottom remains half the width, but that is not as bad a problem as on top.

    Almost perfect graph