Skip to content

Instantly share code, notes, and snippets.

@kamaroly
Created August 22, 2019 18:14
Show Gist options
  • Save kamaroly/34f5e060d2badd2d983fd1d6238ad69f to your computer and use it in GitHub Desktop.
Save kamaroly/34f5e060d2badd2d983fd1d6238ad69f to your computer and use it in GitHub Desktop.
This script is configured to make your chartjs line chart looks elegant.
<div class="card col-md-8">
<div class="cart-header">
<span class="card-title">Today </span>
<span class="dot dot-red"></span> Line red: <span class="text-red-600"> 0 RWF</span>
<span class="dot dot-yellow"></span> Line green: <span class="text-yellow-600"> 0 RWF </span>
</div>
<div class="card-body">
<canvas id="transactionsChart" ></canvas>
</div>
</div>
<div class="card col-md-12">
<div class="cart-header">
<span class="card-title">This Week: </span>
<span class="dot dot-red"></span> Line red: <span class="text-red-600"> 0 RWF</span>
<span class="dot dot-yellow"></span> Line green: <span class="text-yellow-600"> 0 RWF </span>
</div>
<div class="card-header">
<canvas id="last7DaysTransactions" ></canvas>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script type = "text/javascript" >
var dataTransactions = {
labels: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
datasets: [{
label: "RED",
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
lineTension: 0.1,
borderWidth: 1,
backgroundColor: "transparent",
borderColor: "#6F42C1",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#ce020c",
pointBackgroundColor: "#ce020c",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#ce020c",
pointHoverBorderColor: "#ce020c",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
},
{
label: "YELLOW",
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
lineTension: 0.1,
borderWidth: 1,
backgroundColor: "transparent",
borderColor: "#6F42C1",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#fc0",
pointBackgroundColor: "#fc0",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#fc0",
pointHoverBorderColor: "#fc0",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
}
]
};
var weeklyRevenue = {
labels: ["2019-08-15","2019-08-16","2019-08-17","2019-08-18","2019-08-19","2019-08-20","2019-08-21","2019-08-22"],
datasets: [{
label: "RED",
data: [0,0,0,0,0,0,0,0],
lineTension: 0.1,
borderWidth: 1,
backgroundColor: "transparent",
borderColor: "#6F42C1",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#ce020c",
pointBackgroundColor: "#ce020c",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#ce020c",
pointHoverBorderColor: "#ce020c",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
},
{
label: "YELLOW",
data: [0,0,0,0,0,0,0,0],
lineTension: 0.01,
borderWidth: 1,
backgroundColor: "transparent",
borderColor: "#6F42C1",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#fc0",
pointBackgroundColor: "#fc0",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#fc0",
pointHoverBorderColor: "#fc0",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
}
]
};
// Chart options to beautify
var options = {
maintainAspectRatio: false,
legend: {
display: false,
labels: {
fontColor: '#519FFD'
},
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "#e2e8f0"
},
ticks: {
suggestedMax: 100000,
suggestedMin: 0,
beginAtZero: true,
callback: function(value, index, values) {
// Abbreviate the millions
if (value > 1e6) {
return value / 1e6 + 'M Rwf';
}
// Abbreviate the thousands
if (value > 1e3) {
return value / 1e3 + 'K Rwf';
}
// No need to abbreviate
return value + 'K Rwf';
}
},
}]
},
backgroundColor: {
fill: 'transparent'
}
};
var contextTransactions = document.getElementById("transactionsChart").getContext("2d");
var contextlast7DaysTransactions = document.getElementById("last7DaysTransactions").getContext("2d");
var chartInstance = new Chart(contextTransactions, {
type: 'line',
data: dataTransactions,
options: options
});
var chartInstance = new Chart(contextlast7DaysTransactions, {
type: 'line',
data: weeklyRevenue,
options: options
});
</script>
@kamaroly
Copy link
Author

image
It will look to something similar to this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment