apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.63k stars 19.61k forks source link

[Feature] Custom background color for bar chart #20441

Open kmn988 opened 3 weeks ago

kmn988 commented 3 weeks ago

What problem does this feature solve?

Different color for each bar's background

What does the proposed API look like?

backgroundStyle: {
          color: (params) =>{
              if (params.name === 'USA') return 'red'
                return 'green'
          },
          borderRadius: 10,
},
Ovilia commented 2 weeks ago

@kmn988 Can you provide more context about when this is necessary?

kmn988 commented 2 weeks ago

@kmn988 Can you provide more context about when this is necessary?

I have 2 usecases for this. The first one might not be very common but when I use the option

colorBy: "data"

I want to change the background color according to the bar's color like this image

For the second usecase, when I have 2 horizontal bar charts next to each other, I want to show a fixed number of 5 bars each so the distance between each bar for both graph can be the same. If the chart doesn't have enough data, I have to create fake one. When I'm using dataset option, the result will be like this image However, I've just found out that using series's and axis's data option will give me the result that I want, which is no background for item with no value image I still want to have the latter result by using dataset, which is why I request this feature so I can set the background to transparent. Hope my explanation is clear for you.

Ovilia commented 1 week ago

Thanks for your demo. I think it makes sense. We should provide a callback form for it.