On my graph I have datalabels overlapping with the legend on the top of the chart.
Here is my code:
type: 'bar',
data: {
datasets: [
{
type:"bar",
yAxisID: 'left-y-axis',
//barThickness: 24,
label: 'Почасовой',
data: y1,
backgroundColor: 'rgba(54, 162, 135, 0.2)', //'rgba(75,192, 192, 0.2)',
borderColor: 'rgba(54, 162, 135, 0.2)',
borderWidth: 1,
datalabels: {
align: 'center',
anchor: 'center',
//backgroundColor: 'rgba(54, 162, 135, 0.1)',
//function(context) {return context.dataset.backgroundColor;},
borderRadius: 4,
color: 'rgba(54, 162, 135, 0.8)',//'rgba(75,192, 192, 0.8)',
formatter: function(value, context) {
if (value > 0)
return "+" + Math.round(value)
else
return Math.round(value)
},
display: function(context) {
return context.dataset.data[context.dataIndex] != 0; // or >= 1 or ...
}
}
},
{
type:"line",
yAxisID: 'left-y-axis',
label: 'Накопительный',
data: y2,
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderColor: 'rgba(54, 162, 135, 1)',
borderWidth: 2,
lineTension: 0.3,
datalabels: {
//display: false,
align: 'end',
anchor: 'end',
color: 'rgba(54, 162, 135, 1)', //'rgba(75,192, 192, 1)',
}
},
{
type:"line",
/*
type: 'candlestick',
data: {
datasets: [{
label: 'CHRT - Chart.js Corporation',
data: getRandomData(initialDateStr, barCount)
}]
},
*/
yAxisID: 'right-y-axis',
//barThickness: 24,
label: 'Индекс ММВБ',
data: m,
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderColor: 'rgba(245, 120, 81, 0.5)', //'rgba(14, 67, 96, 0.2)', //'rgba(234, 78, 106, 0.2)',
borderDash: [20, 3, 3, 3, 3, 3, 3, 3],
borderWidth: 1,
datalabels: {
display: false,
}
},
],
labels: x,
},
options: {
title: {
display: true,
text: 'График доходности за ' + title,
fontColor: 'rgba(104, 143, 133, 1)',
fontSize: '16',
},
legend: {
display: true,
labels: {
fontColor: 'rgba(54, 162, 135, 1)',
//padding: 50, //'2, 3, 4, 5',
},
},
scales: {
yAxes: [
{
id: 'left-y-axis',
position: 'left',
//stacked: false,
ticks: {
beginAtZero: true,
callback: (value) => value + "₽",
fontColor: 'rgba(104, 143, 133, 1)',
//max: cum + cum/5,
//padding: 25,
},
gridLines: {
color: 'rgba(104, 143, 133, 0.2)',
zeroLineColor: 'rgba(104, 143, 133, 0.5)',
},
},
{
id: 'right-y-axis',
position: 'right',
gridLines: {
display: false,
},
ticks: {
fontColor: 'rgba(245, 120, 81, 0.8)',
},
}
],
xAxes: [
{
//stacked: true,
gridLines: {
color: 'rgba(104, 143, 133, 0.2)',
zeroLineColor: 'rgba(104, 143, 133, 0.5)',
//tickMarkLength: 15
},
ticks: {
fontColor: 'rgba(104, 143, 133, 1)',
},
}
],
},
plugins: {
},
}
How could I make some space right after the legend, or get the line a bit lower so graph figures don't stick out. The only thing worked for me is to set max value of Y axis:
scales: {
yAxes: [
{
id: 'left-y-axis',
position: 'left',
//stacked: false,
ticks: {
beginAtZero: true,
callback: (value) => value + "₽",
fontColor: 'rgba(104, 143, 133, 1)',
max: maxValFromDataSet + maxValFromDataSet/5,
...
But that doesn't look very neat as last top step of Y axis is smaller:
