2๐
โ
If you are using version 1.x of Chart.js, you can customize the ticks using the scaleLabel
key.
var options = {
scaleLabel: function(label){return '$' + label.value}
};
Note that when creating the chart, you should pass the options object as the second argument instead of including it in your monthsData
.
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const initialData = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];
const filledMonths = initialData.map((month) => month.x);
const dataSet = labels.map(month => {
const indexOfFilledData = filledMonths.indexOf(month);
if( indexOfFilledData !== -1) return initialData[indexOfFilledData].y;
return 0;
});
var monthsData = {
labels: labels,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: dataSet
}
]
};
var options = {
scaleLabel: function(label){return '$' + label.value}
};
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx).Line(monthsData, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>
Source:stackexchange.com