Skip to content

Instantly share code, notes, and snippets.

@katogiso

katogiso/chartjs_bar_base_structure.html

Created September 6, 2016 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save katogiso/d0e4fbdc0bdae6830f7daf826d599062 to your computer and use it in GitHub Desktop.
Save katogiso/d0e4fbdc0bdae6830f7daf826d599062 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chartjs_bar_base_structure.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<!-- https://github.com/google/palette.js -->
<script src="../../palette.js/palette.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
<script>
// get palette from palette.js
var pal = palette('cb-BuGn', 8 );
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [ "Day1", "Day2", "Day3" ],
datasets: [
{
label: "base data",
data: [ 27, 33, 49 ],
borderColor: '#' + pal[3],
backgroundColor: '#' + pal[3],
},
{
label: "stacked data",
data: [ 10, 15, 22 ],
borderColor: '#' + pal[5],
backgroundColor: '#' + pal[5],
}
]
},
options: {
responsive: false
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment