CODEWITHSUNDEEP
javascriptchart.js
peterc
peterc

Reputation: 7833

Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted

I have a pie chart using chart.js in my Ionic 4 / Angular application, with the following options...

        let options : ChartOptions = {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            position: 'bottom',
            labels: {
              boxWidth: 20
            }
          },

My chart looks like the following, but I would like the gap as shown below to be smaller, ie the legend closer to the pie chart.

enter image description here

Is there any way to reduce this gap?

Edit 1

I have just noticed it is due to the size of my view port. For example, on a phone screen:

enter image description here

Now if I make the vie responsive, and stretch the view, I can see the legend always stick to the bottom of the view, so when stretched to the chart is large the legend is now closer:

enter image description here

So, the legend us "docked" to the bottom of the view.

Upvotes: 6

Views: 2806

Answers (2)

peterc
peterc

Reputation: 7833

One propose solution (perhaps there is a better way - still be interested...)

I found, in my case, I could do this just by adjusting the bottom of my container.

Using the following markup..

    <div id='graphc'>
      <canvas (click)='updateClick($event)' #mygraph></canvas>
    </div>

and the following css

#graphc{
  width:100%;
  height: 100%;
  padding: 10px;
  padding-bottom: 120px; // <-- this moves it up
}

enter image description here

This at least does what I was after, though if I stretch, I do always have the gap....

Maybe I could make the css "dynamic" to fix this

enter image description here

Upvotes: 0

DEVCNN
DEVCNN

Reputation: 622

I think the space might be due to your css. Try changing that. This solves your problem as well.

legend:{
position: 'bottom',
labels: {
          boxWidth: 20,
          padding: -10
        }
}

Upvotes: 1

Related Questions