ChartJS - PieChart's Label too long and hide the PieChart

Question

I have a lot of data from the database to display on the label chart but the piechart is hidden if it's on a different display device. how can I solve this problem? here is my code :

var pieData={
    labels:["A","B","C"],
    datasets:[
    {
        label: [1,2,3] ,
        data:[1,2,3],
        backgroundColor: 
        [
            "#2fb4ed",
            "#ba68c8",
            "#33e0ff",
            "#0fe07f",
            "#ffb74d",
            "#4caf50",
            "#ff7043"
        ]
    }]
};

var pieOption = { legend:{ onClick: null}, 
                  responsive: true, 
                  label: true, 
                  tooltips: 
                  {
                      callbacks: {
                          label: function(tooltipItem, data) {
                              var dataset = data.datasets[tooltipItem.datasetIndex];
                              var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {return previousValue + currentValue;});
                              var currentValue = dataset.data[tooltipItem.index];
                              var amt = dataset.label[tooltipItem.index];
                              amt = amt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                              var precentage = Math.floor(((currentValue/total) * 100)+0.5);         
                              return "Amount :" + amt;
                      }
                  }
              },

Possible duplicate of [How to fix chart Legends width-height with overflow scroll in ChartJS](https://stackoverflow.com/questions/43229626/how-to-fix-chart-legends-width-height-with-overflow-scroll-in-chartjs) — shrys, Oct 10 '19 at 07:12

score 0 · Answer 1 · answered Oct 10 '19 at 05:20

0

Use the parameters width and height with dynamic values according to your different responsive sizes. example <Line data={pieData} height="50" width="100" />

answered Oct 10 '19 at 05:20

Hemant

170
2
11

I use this code, is it true? : – Delia Elvina Oct 10 '19 at 06:20
Yes, it's true ! – Hemant Oct 10 '19 at 06:45
but it doesn't work, the size of the pie still becomes small – Delia Elvina Oct 10 '19 at 07:00
Okay, please try to check with options: { responsive: true, ... } – Hemant Oct 10 '19 at 07:09

ChartJS - PieChart's Label too long and hide the PieChart

1 Answers1