Controlling the boundaries of sections painted with sectionColors

[ilyaserenyilmaz]

Is there any way to manipulate the boundaries of sections that are colored using sectionColors on y axis? For example, is it possible to have seven different sections such that first section is between [0,30] in y-axis filled with green, second section is between [30,100] in y-axis filled with blue and etc.?

[Abhinandan-Kushwaha]

Can you share an image @ilyaserenyilmaz

[ilyaserenyilmaz]

Of course @Abhinandan-Kushwaha! As you can see, I would like to give different ranges for each colored section on y axis in LineChart.

[Abhinandan-Kushwaha]

Hi @ilyaserenyilmaz
To have Y axis sections of different lengths, this issue might help

[ilyaserenyilmaz]

Hi @Abhinandan-Kushwaha
I already know how to have Y axis sections of different lengths since I was the author of the referred issue. I want to give different background colors for each section however sectionColors prop does not fill the sections with given colors if the sections are created using the issue you have linked. Is there any other way to give background colors for the each section separately when their length are different?

[harishgupta01]

Hi @ilyaserenyilmaz - I am looking for the similar use case but i dont have have the section but using reference line and want to make sure the section color each reference line is different from the other. so basically based on three reference line I want to show three different section color. Could you suggest how can I achieve this ?

[Abhinandan-Kushwaha]

Hi @ilyaserenyilmaz @harishgupta01
Thanks for requesting this feature.

I have added the prop customBackground to Bar, Line, Area charts. customBackground is an object with following keys (All of which are optional).

type CustomBackground = {
  color?: ColorValue
  component?: Function
  horizontalShift?: number
  verticalShift?: number
  height?: number
  width?: number
  widthAdjustment?: number // the library aut-computes the width, if you want slight less or more than that, use this property
}

You can pass any component in the component property of the customBackground prop which will be rendered as the background of the chart.