Chart styling
This commit is contained in:
parent
29c08eca3d
commit
70ac29ea11
|
@ -146,7 +146,29 @@ export default {
|
||||||
|
|
||||||
return gradient
|
return gradient
|
||||||
},
|
},
|
||||||
borderWidth: 3,
|
backgroundColor: context => {
|
||||||
|
const { ctx, chartArea } = context.chart
|
||||||
|
|
||||||
|
if (!chartArea) return null // This case happens on initial chart load
|
||||||
|
|
||||||
|
const gradient = ctx.createLinearGradient(
|
||||||
|
0,
|
||||||
|
chartArea.bottom,
|
||||||
|
0,
|
||||||
|
chartArea.top
|
||||||
|
)
|
||||||
|
|
||||||
|
const hexTransparency = '55'
|
||||||
|
|
||||||
|
gradient.addColorStop(0, colors.cyan.base + hexTransparency)
|
||||||
|
gradient.addColorStop(0.05, colors.green.base + hexTransparency)
|
||||||
|
gradient.addColorStop(0.3, colors.green.base + hexTransparency)
|
||||||
|
gradient.addColorStop(0.7, colors.orange.base + hexTransparency)
|
||||||
|
gradient.addColorStop(0.9, colors.red.base + hexTransparency)
|
||||||
|
|
||||||
|
return gradient
|
||||||
|
},
|
||||||
|
borderWidth: 2,
|
||||||
pointRadius,
|
pointRadius,
|
||||||
|
|
||||||
cubicInterpolationMode: 'default',
|
cubicInterpolationMode: 'default',
|
||||||
|
|
|
@ -78,14 +78,13 @@ export default {
|
||||||
ticks: {
|
ticks: {
|
||||||
maxRotation: 0,
|
maxRotation: 0,
|
||||||
minRotation: 0,
|
minRotation: 0,
|
||||||
autoSkipPadding: 16
|
autoSkipPadding: 24
|
||||||
},
|
},
|
||||||
time: {
|
time: {
|
||||||
unit: 'minute',
|
unit: 'minute',
|
||||||
// stepSize: 15,
|
|
||||||
|
|
||||||
displayFormats: {
|
displayFormats: {
|
||||||
minute: 'H:mm'
|
minute: 'd/M HH:mm'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user