This is the customization question from chart.js

Question

I use chart.js, but css is not applied.I use chart.js, but I don't know how to adjust the location and size and move the label.

<div class="penpal-count-box">
<div class="col">
    <h5 style="padding-top:2%"><i class="fa fa-globe" style="color:blue"> 
  </i>&nbsp;@lang('home/main.penpal_count')
    </h5>
    <hr>

    <canvas id="myChart"></canvas>

  </div>

</div>


<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['한국', '일본'],
        datasets: [{
            label: '# of Votes',
            data: [{
                    !!$koreaSenderCount!!
                },
                {
                    !!$japanSenderCount!!
                }
            ],
            backgroundColor: [
                'red',
                'blue',

            ],
        }]
    },
    options: {
        maintainAspectRatio: false,
    }
});

</script>

<style>
 canvas {
    width: 400px !important;
    height: 170px !important;
    margin-bottom: 3%;
}

</style>

I want to remove the label from the side and set it to fit the upper div. My goal is to apply it in a similar way to the second picture.

Answer 1

Try this, here added position for label, from chart js, legend label document

var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['한국', '일본'],
        datasets: [{
            label: '# of Votes',
            data: [{
                    !!$koreaSenderCount!!
                },
                {
                    !!$japanSenderCount!!
                }
            ],
            backgroundColor: [
                'red',
                'blue',

            ],
        }]
    },
    options: {
        maintainAspectRatio: false,
        legend: {
          position:'right',   // from this line you can get your labels in right direction    
        },
    }
});