search

chartjs / chartjs-chart-financial

Chart.js module for charting financial securities
MIT License
725 stars 197 forks source link

[BUG] Border disappears after hover on candlestick #24

Closed loicbourgois closed 5 years ago

loicbourgois commented 6 years ago

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

image

After

image

benmccann commented 6 years ago

@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 commented 6 years ago

Yes, I'm on it.

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

See updated jsfiddle.

loicbourgois commented 6 years ago

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() :

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

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 commented 6 years ago

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 commented 6 years ago

Found a way to fix the issue in Chart.js https://github.com/loicbourgois/Chart.js/commit/ea150cd8ef55ea8f35be7bb69c75296bb37f8d28 (but if feels like a hack) jsfiddle Will submit a PR in Chart.js

benmccann commented 6 years ago

This will be fixed in the next release of Chart.js https://github.com/chartjs/Chart.js/pull/5570

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

benmccann commented 5 years ago

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