0
163
Viewsis there a way to change the dispaly of a date
I am using ChartJs library in my application for my charts. At the moment I have a chart showing 31 days of the month but due to a lot of dates, the dates are showing like this:
but I actually need them like this :
Does anyone have any idea about changing the way they are shown, thus that the date is shown below the month or the opposite. Momentally my code looks like this:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.map(x => moment(x.date).format("MMM Do")),
datasets: [{
data: data.map(x => x.premium),
backgroundColor: '#ffec87',
borderColor: "#ffec87",
borderWidth: 2,
borderStyle: 'dotted'
}]
},
options: {
scales: {
xAxis: { grid: { display: false } },
yAxis: { grid: { borderDash: [3, 5] } }
}
}
});
·
Juan Pablo Isaza
1 answers
Answer question0
You can use multiline labels for that by providing the labbels in an array like so:
var options = {
type: 'line',
data: {
labels: [
[
"Red",
"second line"
],
[
"Blue",
"second line"
],
[
"Yellow",
"second line"
],
[
"Green",
"second line"
],
[
"Purple",
"second line"
],
[
"Orange",
"second line"
]
],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
·
Juan Pablo Isaza
Report
Answer question