Chart.js: [BUG] Cannot read property 'r' of null

[didix16]

Expected Behavior

It should avoid the exception or change the behavior when borderColor is null.

Current Behavior

Hi. I'm using the library with a server-side personalization data. I saw that when borderColor property is null and you put the mouse over a chart bar, an exception is thrown:

Uncaught TypeError: Cannot read property 'r' of null at Color (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:269:11) at Color (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:243:10) at Object.helpers.color (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:10115:11) at Object.helpers.getHoverColor (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:10122:12) at ChartElement.setHoverStyle (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:6688:147) at Chart.updateHoverStyle (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:8953:67) at Chart.handleEvent (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:9036:8) at Chart.eventHandler (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:8973:21) at listener (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:8910:21) at HTMLCanvasElement.proxies.(anonymous function) (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js:15346:4)

Possible Solution

Well at this point:
// parse Color() argument var vals; if (typeof obj === 'string') { vals = string.getRgba(obj); if (vals) { this.setValues('rgb', vals); } else if (vals = string.getHsla(obj)) { this.setValues('hsl', vals); } else if (vals = string.getHwb(obj)) { this.setValues('hwb', vals); } } else if (typeof obj === 'object') { vals = obj; if (vals.r !== undefined || vals.red !== undefined) { this.setValues('rgb', vals); } else if (vals.l !== undefined || vals.lightness !== undefined) { this.setValues('hsl', vals); } else if (vals.v !== undefined || vals.value !== undefined) { this.setValues('hsv', vals); } else if (vals.w !== undefined || vals.whiteness !== undefined) { this.setValues('hwb', vals); } else if (vals.c !== undefined || vals.cyan !== undefined) { this.setValues('cmyk', vals); } }

since Google Chrome evaluates typeof null === 'object', I would change the evaluation typeof obj === 'object' with:
obj !== null && typeof obj === 'object'

Steps to Reproduce (for bugs)

Here is a live example:
https://jsfiddle.net/4Ltajgq1

Context

At job, during development state, trying to get server data and set the chart with that data.

Environment

• Chart.js version: 2.7.1
• Browser name and version: Google Chrome 56.0.2924.87 (64-bit)
• Link to your project: I can't

Thank you so much

[etimberg]

@didix16 the issue is setting borderColor: null. If you want to remove the border from the bars, I would recommend using borderWidth: 0

[didix16]

Ok thanks, I'll set a default value then.

[karthiksd9]

if i use this condition obj !== null && typeof obj === 'object' all the tooltip value are displayed in Black color.

[benmccann]

Closing as solved

[Seabizkit]

so this wasnt fixed. getting in 2.8