[BUG] Border disappears after hover on candlestick

[loicbourgois]

On a candlestick chart, after hovering over a value, the borders disappear if the chart is configured to display a tooltip with the following parameters :

options: {
  tooltips: {
    position: 'nearest',
    mode: 'index',
  },
},

jsfiddle

Before hover

After

[benmccann]

@loicbourgois thanks for reporting. This didn't use to happen before your commit to add OHLC support. You can verify by going back to the commit before that with git reset --hard bc161d0ed61f92dc72d90684ba77ca6b3e91e09e. Would you be able to look into this issue?

[loicbourgois]

Yes, I'm on it.

And actually, I think the problem has to do with the borderColor option in datasets.

See updated jsfiddle.

[loicbourgois]

I added console.log(vm.borderColor, globalOpts.elements.candlestick.borderColor); in Chart.elements.Candlestick.draw().
Used this code in a new jsfiddle

If borderColor is set, I have the following behavior for console.log() :

• before hover : #000 rgba(90, 90, 90, 1)
• during hover : rgb(0, 0, 0) rgba(90, 90, 90, 1)
• after hover : #000 rgba(90, 90, 90, 1)

If borderColor is undefined, I have the following behavior for console.log() :

• before hover : undefined "rgba(90, 90, 90, 1)"
• during hover : rgba(0, 0, 0, 0.1) rgba(90, 90, 90, 1)
• after hover : rgba(0,0,0,0.1) rgba(90, 90, 90, 1)

Also, I ran some grep commands :

$ grep -rnw ~/chartjs-chart-financial/src/ -e 'rgba(0, 0, 0, 0.1)'
no result
$ grep -rnw ~/chartjs-chart-financial/src/ -e 'rgba(0,0,0,0.1)'
no result
$ grep -rnw ~/Chart.js/src/ -e 'rgba(0, 0, 0, 0.1)'
~/Chart.js/src/scales/scale.radialLinear.js:20:			color: 'rgba(0, 0, 0, 0.1)',
~/Chart.js/src/core/core.scale.js:16:		color: 'rgba(0, 0, 0, 0.1)',
$ grep -rnw ~/Chart.js/src/ -e 'rgba(0,0,0,0.1)'
~/Chart.js/src/core/core.js:17:	defaultColor: 'rgba(0,0,0,0.1)',

So from what I understand, there is some code in a function related to hovering in Chart.js that checks if vm.borderColor is defined, and if it's not the case it affects a default value.

@benmccann Is this a bug in Chart.js or should this be resolved in financial ?

Also, I find it strange that while hovering, the value is changed from #000 to rgb(0, 0, 0)
Finally, there is some inconsistency with the colors : rgba(0, 0, 0, 0.1) vs rgba(0,0,0,0.1). Does this justify a pull request ?

[benmccann]

This sounds like a bug in Chart.js. I'd recommend seeing if you can reproduce it with a plain bar chart or scatter chart to verify that and filing an issue upstream at https://github.com/chartjs/Chart.js/issues

[loicbourgois]

Found a way to fix the issue in Chart.js loicbourgois/Chart.js@ea150cd (but if feels like a hack)
jsfiddle
Will submit a PR in Chart.js

[benmccann]

This will be fixed in the next release of Chart.js chartjs/Chart.js#5570

Thanks @loicbourgois for discovering the issue and driving the fix!

[benmccann]

This is fixed now. Thanks @loicbourgois for the report and all the help towards getting it fixed