[Bug] Data does not get displayed properly after hiding it and showing it again.

[Grafnus]

I encountered a Bug where the financial chart would not display properly. I have appended some images: The images

I found this bug at the example here

Specs:
Browser: Firefox 95.0.2 (32-bit)
Extensions: uBlock Origins (Adblocker) (Both on and off)
Operating system: Windows 10 Enterprise

Steps to reproduce:

1. Hide the dataset by clicking on the label
2. Show the dataset again by clicking on the label
3. The bug is displayed in the graph

[camheras]

Yeah I don't understand either why the exemple is bugged, it maybe needs an update 🤷‍♂️

[Grafnus]

I haven't implemented the plugin into our page yet. Is the bug already fixed?

[abhinavsood]

@Grafnus I figured out why the behavior happens (wicks of the candles disappear when showing the candle after hiding them once) and what you can do to resolve it:

Why:

In this code: https://github.com/chartjs/chartjs-chart-financial/blob/master/src/element.candlestick.js#L15-L22
When you hide the dataset borderColors takes the value transparent and thus changes up, down and unchanged to transparent as well. It retains that value when you show the dataset again.

Resolution:

Explicitly set borderColor as a dataset property in your Chart, something like:

const chart = new Chart(chartContext, {
    type: chartType,
    data: {
      datasets: [{
          label: candlestickTitle,
          data: candlestickData,
          borderColor: {
            up: 'rgba(100, 150, 100, 1)',
            down: 'rgba(150, 100, 100, 1)',
            unchanged: 'rgba(100, 100, 100, 1)',
          },
          borderWidth: 1,
        },
...

This ensures that borders always have a color to display when showing the dataset again