[Bug] borderColor hides bar color with large data

[nico-robert]

Version

5.4.1

Link to Minimal Reproduction

No response

Steps to Reproduce

I don't know if in version 5.2.1 It was the good result , but when I add borderColor property in ìtemStyle` (series), the color is not visible with large data, in 5.4.1 yes. So it hides the color of the bars.

    {
      name: 'Volumn',
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      itemStyle: {
        color: '#7fbe9e',
        // Add black color...
        borderColor: 'black'
      },
      large: true,
      encode: {
        x: 0,
        y: 5
      }
    }

Current Behavior

In 5.4.1

Expected Behavior

The good result for me in 5.2.1

Environment

- OS: macOS Ventura
- Browser: Safari 16.1
- Framework:

Any additional comments?

No response

[Ovilia]

The current behavior seems to be reasonable. As for the candlestick series, we are considering provide a way to dynamically change the range of data one bar represents so that there won't be too many bars like the example. But for general series, I think the current behavior is as expected.

[nico-robert]

okay @Ovilia, It was just to show the difference between 2 versions of Echarts. For me (personal opinion) the result in version 5.2.1 is correct , because the borderColor does not interact with bar color with large data (I'm surprised). But I am agree with you for general series. Not a bug probably , but the visualization was more fun with this version. That said thank you for your quick response.

[Ovilia]

I seemed to misunderstand the demo to be a problem with candlestick series. This seems to be wrong with the bar series.

[echarts-bot]

This issue is labeled with difficulty: easy.
@nico-robert Would you like to debug it by yourself? This is a quicker way to get your problem fixed. Or you may wait for the community to fix.

Please have a look at How to debug ECharts if you'd like to give a try. 🤓

[kai890707]

@nico-robert
If you need to solve the problem urgently, maybe it would be better to set borderWidth less than 1?

[nico-robert]

@kai890707 , thanks

If you need to solve the problem urgently, maybe it would be better to set borderWidth less than 1?

Until something better it was my solution too.

I'm newbie... The difficulty label is set to easy (To tell you the truth, I tried again to find where the bug was today...) But I don’t know how to debug this lib and my knowledge of JavaScript/TypeScript is basic.
Please if your time permits, can you show me where this property is found in the source file ?

[Traumflug]

@Ovilia

As for the candlestick series, we are considering provide a way to dynamically change the range of data one bar represents so that there won't be too many bars like the example.

I don't think that's worth the work, people working with trading charts wouldn't use it. Candlestick charts are less about displaying a lot of numbers nicely, they're more about learning how a market behaves. Accordingly, a chart showing hourly candles is fundamentally distinct from a chart showing daily candles. Switching between both while zooming would mess up the view.

Regarding improving candlesticks: a distinct color for just the wicks would be a nice addition.

[DevitX]

I seemed to misunderstand the demo to be a problem with candlestick series. This seems to be wrong with the bar series.

I looked into this problem, as you mentioned the issue is in the bar series (BarView.ts). In version 5.3.0-rc.1, commit 897081e [fix(bar): use rect instead of line to draw large paths], the createLarge function sets el.style.stroke to a color with el.useStyle(data.getVisual('style'));,. This causes the problem. If you reset el.style.stroke to null (default), the issue seems to be resolved and follows the behavior in 5.2.1. I’ve opened a pull request about this: #20465.