Chart.js y axis labels are truncated

Question

I have a bootstrap modal where I have a chart.js in it.

The problem is that left Y axis values are truncated.

This is the HTML in the inspector:

 <div class="modal-dialog modal-center"> <div class="modal-content"> <div class="modal-header" style="background-color:#62a8ea;"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" style="color:white;">Reading Details</h4> </div> <div class="modal-body" style="height: 400px;"><div><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div> <canvas id="detail-chart" width="560" height="280" class="chartjs-render-monitor" style="display: block; width: 560px; height: 280px;"></canvas> </div> </div> <div class="modal-footer"> </div> </div> </div>

Any clue?

VAAA · Accepted Answer · 2017-12-07 19:38:17Z

4

Just add the following:

options: { layout: { padding: { // Any unspecified dimensions are assumed to be 0 left: 10, bottom: 5 } },

That will fix the problem.

answered Dec 7, 2017 at 19:38

VAAA

15.1k28 gold badges145 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chetan Oswal Over a year ago

Hi @VAAA. Your solution doesn't seem to help. Your solution will only shift graph to left by 10px. We want to manage the label in the space available. Suppose the width is of 50px for y-axis.

JAY PATEL · Accepted Answer · 2021-05-09 12:15:10Z

just copy and paste the below option this will fix your problem and also customize by removing or adding properties.

lineGraphOption: ChartOptions = { responsive: true, maintainAspectRatio: false, elements: { point: { radius: 0, }, }, tooltips: { mode: 'index' }, layout: { padding: { top: 50, right: 10, bottom: 50, left: 10, } }, legend: { position: "bottom", display: true, onClick: (() => { }), align: "center", labels: { boxWidth: 12, padding: 30 }, }, scales: { xAxes: [{ type: 'time', time: { unit: 'day', minUnit: 'month', unitStepSize: 4, displayFormats: { 'month': 'MMM DD', } }, ticks: { max: '31 Oct', } }], yAxes: [{ ticks: { callback: function (value) { return value + ' K' } }, }] }, plugins: { } }

Collectives™ on Stack Overflow

Chart.js y axis labels are truncated

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related