A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
<div class="chart">
<canvas id="performanceChart" class="chart-canvas"></canvas>
</div>
<script>
Charts.create('#performanceChart', 'line', options, data)
</script>
<script>
var options = {
scales: {
yAxes: [{
ticks: {
callback: function(a) {
if (!(a % 10))
return "$" + a + "k"
}
}
}]
},
tooltips: {
callbacks: {
label: function(a, e) {
var t = e.datasets[a.datasetIndex].label || "",
o = a.yLabel,
r = "";
return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">$' + o + "k</span>"
}
}
}
}
</script>
<script>
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Performance",
data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40]
}]
}
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>
<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>
<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs.js"></script>
<script>
Charts.init()
</script>
An area chart or area graph displays graphically quantitative data. It is based on the line chart.
<div class="chart">
<canvas id="performanceChart" class="chart-canvas"></canvas>
</div>
<script>
Charts.create('#performanceChart', 'line', options, data)
</script>
<script>
var options = {
elements: {
line: {
fill: 'start',
backgroundColor: settings.charts.colors.area
}
},
scales: {
yAxes: [{
ticks: {
callback: function(a) {
if (!(a % 10))
return "$" + a + "k"
}
}
}]
},
tooltips: {
callbacks: {
label: function(a, e) {
var t = e.datasets[a.datasetIndex].label || "",
o = a.yLabel,
r = "";
return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">$' + o + "k</span>"
}
}
}
}
</script>
<script>
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Performance",
data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40]
}]
}
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>
<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>
<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs.js"></script>
<script>
Charts.init()
</script>
Excellent at showing the relational proportions between data.
<div class="chart">
<canvas id="devicesChart" class="chart-canvas"></canvas>
</div>
<script>
Charts.create('#devicesChart', 'doughnut', options, data)
</script>
<script>
var options = {
tooltips: {
callbacks: {
title: function(a, e) {
return e.labels[a[0].index]
},
label: function(a, e) {
var t = "";
return t += '<span class="popover-body-value">' + e.datasets[0].data[a.index] + "%</span>"
}
}
}
}
</script>
<script>
var data = {
labels: ["Desktop", "Tablet", "Mobile"],
datasets: [{
data: [60, 25, 15],
backgroundColor: [
settings.colors.primary[500],
settings.colors.success[300],
settings.colors.success[100]
],
hoverBorderColor:
"dark" == settings.charts.colorScheme
? settings.colors.gray[800]
: settings.colors.white
}]
}
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>
<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>
<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs.js"></script>
<script>
Charts.init()
</script>
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
<div class="chart">
<canvas id="ordersChart" class="chart-canvas"></canvas>
</div>
<script>
Charts.create('#ordersChart', 'roundedBar', options, data)
</script>
<script>
var options = {
// Rounded Bar
barRoundness: 1.2,
// Chart Specific Formatting (Orders)
scales: {
yAxes: [{
ticks: {
callback: function(a) {
if (!(a % 10))
return "$" + a + "k"
}
}
}]
},
tooltips: {
callbacks: {
label: function(a, e) {
var t = e.datasets[a.datasetIndex].label || "",
o = a.yLabel,
r = "";
return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">$' + o + "k</span>"
}
}
}
}
</script>
<script>
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Sales",
data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
}]
}
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>
<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>
<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs-rounded-bar.js"></script>
<script src="assets/js/chartjs.js"></script>
<script>
Charts.init()
</script>
Easily toggle an additional set of data with a simple interface based on the data attributes.
<div class="custom-control custom-checkbox-toggle">
<input
id="chart-switch-toggle"
type="checkbox"
class="custom-control-input"
role="switch"
data-toggle="chart"
data-target="#ordersChart"
data-add='{
"data":{
"datasets":[{
"data":[15,10,20,12,7,0,8,16,18,16,10,22],
"backgroundColor":"#b2e599",
"label":"Affiliate"
}]
}
}'
checked="">
<label
class="custom-control-label"
for="chart-switch-toggle">
<span class="sr-only">Show affiliate</span>
</label>
</div>
A radar chart provides a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.
<div class="chart">
<canvas id="topicIqChart" class="chart-canvas"></canvas>
</div>
<script>
Charts.create('#topicIqChart', 'radar', options, data)
</script>
<script>
var options = {
elements: {
point: {
pointStyle: 'circle',
radius: 4,
hoverRadius: 5,
backgroundColor: settings.colors.white,
borderColor: settings.colors.primary[500],
borderWidth: 2
}
},
scale: {
ticks: {
display: false,
beginAtZero: true,
maxTicksLimit: 4
},
gridLines: {
color: settings.colors.gray[300]
},
angleLines: {
color: settings.colors.gray[300]
},
pointLabels: {
fontSize: 14
}
},
tooltips: {
callbacks: {
label: function(a, e) {
var t = e.datasets[a.datasetIndex].label || "",
o = a.yLabel,
r = "";
return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">' + o + " points</span>"
}
}
}
}
</script>
<script>
var data = {
labels: ["JavaScript", "HTML", "Flinto", "Vue.js", "Sketch", "Priciple", "CSS", "Angular"],
datasets: [{
label: "Experience IQ",
data: [30, 35, 33, 32, 31, 30, 28, 36],
pointHoverBorderColor: settings.colors.success[400],
pointHoverBackgroundColor: settings.colors.white,
borderJoinStyle: 'bevel',
lineTension: .1
}]
}
</script>
<!-- Global Settings -->
<script src="assets/js/settings.js"></script>
<!-- Chart.js Library -->
<script src="assets/vendor/Chart.min.js"></script>
<!-- Chart.js Wrapper -->
<script src="assets/js/chartjs.js"></script>
<script>
Charts.init()
</script>