Skip to content

Instantly share code, notes, and snippets.

@Bevilacqua

Bevilacqua/chart.js.example.html

Created July 20, 2018 22:28
Show Gist options
  • Save Bevilacqua/4078cf208bcfa003ffa40e4f5d735018 to your computer and use it in GitHub Desktop.
Save Bevilacqua/4078cf208bcfa003ffa40e4f5d735018 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chart.js.example.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
</head>
<body>
<canvas id="myChart" width="450" height="200"></canvas>
<script>
var androidData = [
{x: 1, y: .1},
{x: 2, y: .2},
{x: 3, y: .3},
{x: 4, y: .4},
]
var iosData = [
{x: 1, y: .89},
{x: 2, y: .75},
{x: 3, y: .6},
{x: 4, y: .55},
]
var otherData = [
{x: 1, y: .01},
{x: 2, y: .05},
{x: 3, y: .1},
{x: 4, y: .05},
]
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
backgroundColor: 'green',
borderColor: 'green',
data: androidData,
hidden: false,
label: 'Android'
}, {
backgroundColor: 'blue',
borderColor: 'blue',
data: iosData,
hidden: false,
label: 'iOS'
}, {
backgroundColor: 'red',
borderColor: 'red',
data: otherData,
hidden: false,
label: 'Other'
}],
},
options: {
scales: {
xAxes: [{
label: ["Year 1","Year 2","Year 3","Year 4"],
type:'linear'
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero:true,
}
}]
},
animation: {
duration: 1500,
},
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment