How to make inner paddings from canvas in chart.js?

Question

I use https://chartjs-plugin-datalabels.netlify.com/ for drawing datalabels. I tried to find issue and found ( https://github.com/chartjs/chartjs-plugin-datalabels/issues/88 ) but this solution doesn't suit me. As you can see, if i add layout paddings it affects height of gridlines. I need something like inner paddings.

 const ITEMS_COUNT = 25; const MIN = -8000; const MAX = 8000; const defaultDatasetOptions = { pointRadius: 0, pointHoverRadius: 0, pointBorderWidth: 0, pointHoverBorderWidth: 0, pointHitRadius: 10, borderWidth: 0 }; const datalabels = { color: 'black', anchor: context => { const index = context.dataIndex; const value = context.dataset.data[index]; return value < 0? 'start': 'end'; }, align: context => { const index = context.dataIndex; const value = context.dataset.data[index]; return value < 0? 'end': 'start'; }, display: getDataLabelDisplay, formatter: value => value.toLocaleString(), offset: -20 }; const data = { labels: _.range(1, ITEMS_COUNT), datasets: [ {...defaultDatasetOptions, label: 'Series 1', data: Array.from(Array(ITEMS_COUNT), () => _.random(MIN, MAX)), backgroundColor: 'rgba(255, 0, 0, .3)' }, {...defaultDatasetOptions, label: 'Series 2', data: Array.from(Array(ITEMS_COUNT), () => _.random(MIN, MAX)), backgroundColor: 'rgba(0, 255, 0, .3)' }, {...defaultDatasetOptions, label: 'Series 3', data: Array.from(Array(ITEMS_COUNT), () => _.random(MIN, MAX)), backgroundColor: 'rgba(0, 0, 255, .3)' } ] }; const options = { legend: { display: false }, scales: { xAxes: [ { type: 'category', gridLines: { offsetGridLines: true, color: 'orange', tickMarkLength: 0, drawBorder: false }, ticks: { display: false, maxRotation: 0, beginAtZero: true, autoSkip: false, stepSize: 1 }, offset: true } ], yAxes: [{ display: false }] }, tooltips: { mode: 'index', intersect: false }, hover: { mode: 'index', intersect: false }, layout: { padding: { top: 20, bottom: 20 } }, plugins: { datalabels } }; new Chart(document.querySelector('canvas'), { type: 'line', data, options }); // You can skip this function function getDataLabelDisplay(context) { const index = context.dataIndex; const value = context.dataset.data[index]; if (value === 0) { return false; } const minVisibleIndex = 0; const maxVisibleIndex = _.size(context.chart.data.labels) - 1; const dataInViewport = _.flatten( _.map(context.chart.data.datasets, dataset => { const dataInViewPort = _.slice(dataset.data, minVisibleIndex, maxVisibleIndex + 1); return _.map(dataInViewPort, (value, index) => { return { index: minVisibleIndex + index, value }; }); }) ); const minData = _.minBy(dataInViewport, 'value'); const minDataValue = _.get(minData, 'value'); const maxData = _.maxBy(dataInViewport, 'value'); const maxDataValue = _.get(maxData, 'value'); const allMinData = _.filter(dataInViewport, data => data.value === minDataValue); const allMaxData = _.filter(dataInViewport, data => data.value === maxDataValue); const isFoundedInMinValues = Boolean(_.find(allMinData, ['index', index])); const isFoundedInMaxValues = Boolean(_.find(allMaxData, ['index', index])); return value < 0? isFoundedInMinValues && value === minDataValue: isFoundedInMaxValues && value === maxDataValue; }

 canvas { border: 1px solid black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script> <canvas></canvas>

Answer 1

I can't prove it right now but sometimes the problem is on the version of chart.js that you are using. Try to use the 2.7.0