Skip to content

Instantly share code, notes, and snippets.

@njoyard

njoyard/bug.html

Created November 9, 2020 23:14
Show Gist options
  • Save njoyard/d06b3b64e7d0b62660312fc5edc852e2 to your computer and use it in GitHub Desktop.
Save njoyard/d06b3b64e7d0b62660312fc5edc852e2 to your computer and use it in GitHub Desktop.
Download ZIP
Chart.js 3.0.0-beta.6 bug
Raw
bug.html
<!DOCTYPE html>
<html>
<head>
<title>Stacked Bar Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/1.25.0/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-luxon.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
<button id="change">Change</button>
<script>
window.onload = function () {
var ctx = document.getElementById('canvas').getContext('2d')
window.myBar = new Chart(ctx, {
options: {
title: {
display: true,
text: ' '
},
fontFamily: 'Roboto, "Helvetica Neue", sans-serif;',
responsive: true,
maintainAspectRatio: false,
animation: false,
elements: {
line: {
tension: 0.1
},
point: {
radius: 1,
hitRadius: 10
}
},
legend: {
display: false
},
scales: {
x: {
gridLines: {
display: false
},
type: 'time',
time: {
unit: 'day'
}
},
count: {
axis: 'y',
gridLines: {
borderDash: []
},
position: 'right',
ticks: {
maxTicksLimit: 11
},
type: 'linear'
}
},
tooltips: {
backgroundColor: 'rgba(0, 0, 0, 0.65)',
callbacks: {}
}
},
data: {
datasets: [
{
order: 4,
id: 'dismissed',
label: 'Rentrés à domicile',
fill: false,
yAxisID: 'count',
borderWidth: 0,
backgroundColor: 'rgba(0,150,136,0.5)',
borderColor: 'rgba(0,150,136,0.5)',
normalized: true,
data: [
{
x: 1584489600000,
y: 816
},
{
x: 1584576000000,
y: 1180
},
{
x: 1584662400000,
y: 1587
},
{
x: 1584748800000,
y: 1811
},
{
x: 1584835200000,
y: 2117
}
],
type: 'bar',
barPercentage: 1,
categoryPercentage: 1,
stack: 'stack'
},
{
order: 3,
id: 'hospital',
label: 'Patients hospitalisés',
fill: false,
yAxisID: 'count',
borderWidth: 0,
backgroundColor: 'rgba(255,152,0,0.5)',
borderColor: 'rgba(255,152,0,0.5)',
normalized: true,
data: [
{
x: 1580601600000,
y: 6
},
{
x: 1580688000000,
y: 6
},
{
x: 1580774400000,
y: 6
},
{
x: 1580860800000,
y: 6
},
{
x: 1580947200000,
y: 6
}
],
type: 'bar',
barPercentage: 1,
categoryPercentage: 1,
stack: 'stack'
},
{
order: 2,
id: 'intensive',
label: 'Patients en réanimation',
fill: false,
yAxisID: 'count',
borderWidth: 0,
backgroundColor: 'rgba(244,67,54,0.5)',
borderColor: 'rgba(244,67,54,0.5)',
normalized: true,
data: [
{
x: 1580601600000,
y: 1
},
{
x: 1580688000000,
y: 1
},
{
x: 1580774400000,
y: 1
},
{
x: 1580860800000,
y: 1
},
{
x: 1581033600000,
y: 1
}
],
type: 'bar',
barPercentage: 1,
categoryPercentage: 1,
stack: 'stack'
},
{
order: 1,
id: 'deceased',
label: 'Décès',
fill: false,
yAxisID: 'count',
borderWidth: 0,
backgroundColor: 'rgba(158,158,158,0.5)',
borderColor: 'rgba(158,158,158,0.5)',
normalized: true,
data: [
{
x: 1581724800000,
y: -1
},
{
x: 1581811200000,
y: -1
},
{
x: 1581897600000,
y: -1
},
{
x: 1581984000000,
y: -1
},
{
x: 1582070400000,
y: -1
}
],
type: 'bar',
barPercentage: 1,
categoryPercentage: 1,
stack: 'stack'
}
]
}
})
}
document.getElementById('change').addEventListener('click', function () {
window.myBar.options = {
title: {
display: true,
text: ' '
},
fontFamily: 'Roboto, "Helvetica Neue", sans-serif;',
responsive: true,
maintainAspectRatio: false,
animation: false,
elements: {
line: {
tension: 0.1
},
point: {
radius: 1,
hitRadius: 10
}
},
legend: {
display: false
},
scales: {
x: {
gridLines: {
display: false
},
type: 'time',
time: {
unit: 'day'
}
},
count: {
axis: 'y',
gridLines: {
borderDash: []
},
position: 'right',
ticks: {
maxTicksLimit: 11
},
type: 'linear'
},
percent: {
axis: 'y',
gridLines: {
borderDash: [5, 5]
},
position: 'left',
ticks: {
maxTicksLimit: 11
},
type: 'linear'
}
},
tooltips: {
backgroundColor: 'rgba(0, 0, 0, 0.65)',
callbacks: {}
}
}
window.myBar.data = {
datasets: [
{
order: 4,
id: 'tests',
label: 'Tests effectués',
fill: false,
yAxisID: 'count',
borderWidth: 0,
backgroundColor: 'rgba(33,150,243,0.5)',
borderColor: 'rgba(33,150,243,0.5)',
normalized: true,
data: [
{
x: 1589328000000,
y: 38300
},
{
x: 1589414400000,
y: 41386
},
{
x: 1589500800000,
y: 46162
},
{
x: 1589587200000,
y: 15678
},
{
x: 1589673600000,
y: 6013
}
],
type: 'bar',
barPercentage: 1,
categoryPercentage: 1
},
{
order: 3,
id: 'positives',
label: 'Tests positifs',
fill: false,
yAxisID: 'count',
borderWidth: 0,
backgroundColor: 'rgba(255,152,0,0.5)',
borderColor: 'rgba(255,152,0,0.5)',
normalized: true,
data: [
{
x: 1589328000000,
y: 875
},
{
x: 1589414400000,
y: 985
},
{
x: 1589500800000,
y: 1015
},
{
x: 1589587200000,
y: 289
},
{
x: 1589673600000,
y: 136
}
],
type: 'bar',
barPercentage: 1,
categoryPercentage: 1
},
{
order: 2,
id: 'positivity',
label: 'Taux de positivité',
fill: false,
yAxisID: 'percent',
borderWidth: 2,
backgroundColor: 'rgba(244,67,54,0.5625)',
borderColor: 'rgba(244,67,54,0.5625)',
normalized: true,
data: [
{
x: 1589328000000,
y: 0.022845953002610966
},
{
x: 1589414400000,
y: 0.02380031894843667
},
{
x: 1589500800000,
y: 0.021987782158485333
},
{
x: 1589587200000,
y: 0.018433473657354253
},
{
x: 1589673600000,
y: 0.022617661732912023
}
],
type: 'line',
showLine: false,
pointRadius: 2
},
{
order: 1,
id: 'positivity-weekly',
label: 'Taux de positivité',
fill: false,
yAxisID: 'percent',
borderWidth: 2,
backgroundColor: 'rgba(244,67,54,0.75)',
borderColor: 'rgba(244,67,54,0.75)',
normalized: true,
data: [
{
x: 1589328000000,
y: 0.021766881941721807
},
{
x: 1589414400000,
y: 0.02193703789995985
},
{
x: 1589500800000,
y: 0.02207986690854236
},
{
x: 1589587200000,
y: 0.021892319330711892
},
{
x: 1589673600000,
y: 0.02157937078974106
}
],
type: 'line',
spanGaps: true,
pointRadius: 0
}
]
}
window.myBar.update()
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment