Skip to content

Instantly share code, notes, and snippets.

@sporto

sporto/QuickChart URL

Last active October 1, 2019 22:20
Show Gist options
  • Save sporto/0f93b567cd15a3d3344dca1ecd15f3da to your computer and use it in GitHub Desktop.
Save sporto/0f93b567cd15a3d3344dca1ecd15f3da to your computer and use it in GitHub Desktop.
Download ZIP
QuickChart
Raw
code.js
// Edit me!
{
type: 'bar',
options: {
legend: {
position: 'bottom',
labels: {
boxWidth: 12,
padding: 20,
},
},
scales: {
xAxes: [
{
stacked: true,
gridLines: {
offsetGridLines: false,
drawOnChartArea: false,
},
ticks: {
fontSize: 14,
maxTicksLimit: 5,
maxRotation: 0,
minRotation: 0,
}
}
],
yAxes: [
{
gridLines: {
drawBorder: true,
display: true,
drawOnChartArea: true,
},
ticks: {
fontSize: 14,
beginAtZero: true,
padding: 8,
callback: function(value, index, values) {
if (value >= 1000) {
return '$' + value / 1000 + "k";
} else {
return '$' + value;
}
}
}
}
]
},
plugins: {
datalabels: {
display: true,
align: 'top',
anchor: "end",
clamp: true,
borderRadius: 3,
color: "#FFF",
backgroundColor: "#000"
},
}
},
data: {
labels: [
'1 Feb',
'2 Feb',
'3 Feb',
'4 Feb',
'5 Feb',
'6 Feb',
'7 Feb',
'8 Feb',
'9 Feb',
'10 Feb',
'11 Feb',
'12 Feb',
'13 Feb',
'14 Feb',
'15 Feb',
'16 Feb',
'17 Feb',
'18 Feb',
'19 Feb',
'20 Feb',
'21 Feb',
'22 Feb',
'23 Feb',
'24 Feb',
'25 Feb',
'26 Feb',
'27 Feb',
'28 Feb',
],
datasets: [{
label: 'Past Usage',
backgroundColor: '#c7eeee',
data: [
50,
60,
70,
15,
10,
90,
60,
60,
70,
140,
150,
90,
50,
60,
70,
180,
150,
90,
50,
60,
70,
180,
150,
90,
120,
100,
null
],
datalabels: {
display: false,
}
}, {
label: 'Usage',
backgroundColor: '#00cccf',
data: [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
120,
80
]
}]
}
}
Raw
QuickChart URL
https://quickchart.io/chart?bkg=white&c=%2F%2F%20Edit%20me!%0A%7B%0A%20%20type%3A%20%27bar%27%2C%0A%20%20%20options%3A%20%7B%0A%20%20%20%20legend%3A%20%7B%0A%20%20%20%20%20%20position%3A%20%27bottom%27%2C%0A%20%20%20%20%20%20labels%3A%20%7B%0A%20%20%20%20%20%20%20%20boxWidth%3A%2012%2C%0A%20%20%20%20%20%20%20%20padding%3A%2020%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%09scales%3A%20%7B%0A%20%20%20%20%09xAxes%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20stacked%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20gridLines%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20offsetGridLines%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20drawOnChartArea%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20fontSize%3A%2014%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20maxTicksLimit%3A%205%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20maxRotation%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20minRotation%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20yAxes%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%09%20gridLines%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20drawBorder%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20drawOnChartArea%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%09fontSize%3A%2014%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09beginAtZero%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%208%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20callback%3A%20function(value%2C%20index%2C%20values)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(value%20%3E%3D%201000)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%27%24%27%20%2B%20value%20%2F%201000%20%2B%20%22k%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%27%24%27%20%2B%20value%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20plugins%3A%20%7B%0A%20%20%20%20%20%20datalabels%3A%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20%20%20align%3A%20%27top%27%2C%0A%20%20%20%20%20%20%20%20anchor%3A%20%22end%22%2C%0A%20%20%20%20%20%20%20%20clamp%3A%20true%2C%0A%20%20%20%20%20%20%20%20borderRadius%3A%203%2C%0A%20%20%20%20%20%20%20%20color%3A%20%22%23FFF%22%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%22%23000%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%0A%20%20%20%0A%20%20%20%7D%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%0A%20%20%20%20%20%20%271%20Feb%27%2C%0A%20%20%20%20%20%20%272%20Feb%27%2C%0A%20%20%20%20%20%20%273%20Feb%27%2C%0A%20%20%20%20%20%20%274%20Feb%27%2C%0A%20%20%20%20%20%20%275%20Feb%27%2C%0A%20%20%20%20%20%20%276%20Feb%27%2C%0A%20%20%20%20%20%20%277%20Feb%27%2C%0A%20%20%20%20%20%20%278%20Feb%27%2C%0A%20%20%20%20%20%20%279%20Feb%27%2C%0A%20%20%20%20%20%20%2710%20Feb%27%2C%0A%20%20%20%20%20%20%2711%20Feb%27%2C%0A%20%20%20%20%20%20%2712%20Feb%27%2C%0A%20%20%20%20%20%20%2713%20Feb%27%2C%0A%20%20%20%20%20%20%2714%20Feb%27%2C%0A%20%20%20%20%20%20%2715%20Feb%27%2C%0A%20%20%20%20%20%20%2716%20Feb%27%2C%0A%20%20%20%20%20%20%2717%20Feb%27%2C%0A%20%20%20%20%20%20%2718%20Feb%27%2C%0A%20%20%20%20%20%20%2719%20Feb%27%2C%0A%20%20%20%20%20%20%2720%20Feb%27%2C%0A%20%20%20%20%20%20%2721%20Feb%27%2C%0A%20%20%20%20%20%20%2722%20Feb%27%2C%0A%20%20%20%20%20%20%2723%20Feb%27%2C%0A%20%20%20%20%20%20%2724%20Feb%27%2C%0A%20%20%20%20%20%20%2725%20Feb%27%2C%0A%20%20%20%20%20%20%2726%20Feb%27%2C%0A%20%20%20%20%20%20%2727%20Feb%27%2C%0A%20%20%20%20%20%20%2728%20Feb%27%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20datasets%3A%20%5B%7B%0A%20%20%20%20%20%20label%3A%20%27Past%20Usage%27%2C%0A%20%20%20%20%20%20backgroundColor%3A%20%27%23c7eeee%27%2C%0A%20%20%20%20%20%20data%3A%20%5B%20%0A%20%20%20%20%20%20%20%2050%2C%0A%20%20%20%20%20%20%20%2060%2C%0A%20%20%20%20%20%20%20%2070%2C%0A%20%20%20%20%20%20%20%2015%2C%0A%20%20%20%20%20%20%20%2010%2C%0A%20%20%20%20%20%20%20%2090%2C%0A%20%20%20%20%20%20%20%2060%2C%0A%20%20%20%20%20%20%20%2060%2C%0A%20%20%20%20%20%20%20%2070%2C%0A%20%20%20%20%20%20%20%20140%2C%0A%20%20%20%20%20%20%20%20150%2C%0A%20%20%20%20%20%20%20%2090%2C%0A%20%20%20%20%20%20%20%2050%2C%0A%20%20%20%20%20%20%20%2060%2C%0A%20%20%20%20%20%20%20%2070%2C%0A%20%20%20%20%20%20%20%20180%2C%0A%20%20%20%20%20%20%20%20150%2C%0A%20%20%20%20%20%20%20%2090%2C%0A%20%20%20%20%20%20%20%2050%2C%0A%20%20%20%20%20%20%20%2060%2C%0A%20%20%20%20%20%20%20%2070%2C%0A%20%20%20%20%20%20%20%20180%2C%0A%20%20%20%20%20%20%20%20150%2C%0A%20%20%20%20%20%20%20%2090%2C%0A%20%20%20%20%20%20%20%20120%2C%0A%20%20%20%20%20%20%20%20100%2C%0A%20%20%20%20%20%20%20%20null%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20datalabels%3A%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20false%2C%20%20%20%20%20%20%09%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%20%7B%0A%20%20%20%20%20%20label%3A%20%27Usage%27%2C%0A%20%20%20%20%20%20backgroundColor%3A%20%27%2300cccf%27%2C%0A%20%20%20%20%20%20data%3A%20%5B%20%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20120%2C%0A%20%20%20%20%20%20%20%2080%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%5D%0A%20%20%7D%0A%7D
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment