echarts icon indicating copy to clipboard operation
echarts copied to clipboard

Can the yAxis labels sit on top of the splitline?

Open 27pchrisl opened this issue 1 year ago • 1 comments

What problem does this feature solve?

Hi, our designer has come up with the following design that I am unable to replicate in echarts where the yAxis label is sitting on top of the splitline

Screenshot 2024-05-18 at 13 45 46

Using this configuration I can move the text to the correct position:

'yAxis' => [
  'axisLabel' => [
    'padding' => [0, 0, 3, 0],
    'inside' => true,
    'verticalAlign' => 'bottom',
  ],
],

Screenshot 2024-05-18 at 13 47 31

But I cannot figure out how to move the line series so there is some margin on the left to prevent overlap.

Is such a design possible with echarts? Thanks for the great library!

What does the proposed API look like?

Ideally there would be some way of padding the splitline to overflow its container, or adding internal margin to cause the chart to start in a different position, or adding some sort of margin to the xAxis to do this?

27pchrisl avatar May 18 '24 12:05 27pchrisl

adding some sort of margin to the xAxis to do this?

yes - boundaryGap, see Demo image

helgasoft avatar May 18 '24 22:05 helgasoft

Perfect thanks @helgasoft ! The additional thing I missed that was in your demo was to use time series, I was using categories before.

27pchrisl avatar May 19 '24 08:05 27pchrisl