javascript - How to Increase the label font size and decrease the size of my pie using chart.js? - Stack Overflow

admin管理员组

文章数量:1425819

This is the code that I used:

var ctx = document.getElementById("pages_breakdown").getContext('2d');
    ctx.width = 400;
    ctx.height = 300;
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Primary pages {{ $array_pages_breakdown[0] }}',
                     'Dupliacte pages {{ $array_pages_breakdown[1] }}',
                     'Paginated 2+ {{ $array_pages_breakdown[2] }}',
                     'Mobile alternates {{ $array_pages_breakdown[3] }}',
                     'Non-indexable pages {{ $array_pages_breakdown[4] }}',
                     'Non-200 pages {{ $array_pages_breakdown[5] }}',
                     'Failed URL {{ $array_pages_breakdown[6] }}'],
            datasets: [{

                data: [ {{ $array_pages_breakdown[0] }}, {{ $array_pages_breakdown[1] }}, {{ $array_pages_breakdown[2] }}, {{ $array_pages_breakdown[3] }}, {{ $array_pages_breakdown[4] }}, {{ $array_pages_breakdown[5] }}, {{ $array_pages_breakdown[6] }}],
                backgroundColor: [
                                    'rgba(59, 153, 129, 1.0)',
                                    'rgba(232, 179, 58, 1.0)',
                                    'rgba(214, 212, 209, 1.0)',
                                    'rgba(75, 192, 192, 1.0)',
                                    'rgba(122, 120, 117, 1.0)',
                                    'rgba(224, 33, 81, 1.0)',
                                    'rgba(244, 90, 39, 1.0)'
                                ]

                }]
        },
        options: {
            rotation: (0.5 * Math.PI) - (95/180 * Math.PI),
            responsive: false,
            legend: {
                    position: 'left'
            },
            layout: {
                padding:{
                    left: 30,
                    right: 0,
                    top: 0,
                    bottom: 0
                }
            } 
        } 

    });

This is the output:

Expected output was this:

How can I fix my label to make it a little bigger and decrease the size of my pie? I tried to put fontSize inside my option but it didn't change anything. I want to have those % as well and I tried this, but when I use datapoints on my chart it crashes.

This is the code that I used:

var ctx = document.getElementById("pages_breakdown").getContext('2d');
    ctx.width = 400;
    ctx.height = 300;
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Primary pages {{ $array_pages_breakdown[0] }}',
                     'Dupliacte pages {{ $array_pages_breakdown[1] }}',
                     'Paginated 2+ {{ $array_pages_breakdown[2] }}',
                     'Mobile alternates {{ $array_pages_breakdown[3] }}',
                     'Non-indexable pages {{ $array_pages_breakdown[4] }}',
                     'Non-200 pages {{ $array_pages_breakdown[5] }}',
                     'Failed URL {{ $array_pages_breakdown[6] }}'],
            datasets: [{

                data: [ {{ $array_pages_breakdown[0] }}, {{ $array_pages_breakdown[1] }}, {{ $array_pages_breakdown[2] }}, {{ $array_pages_breakdown[3] }}, {{ $array_pages_breakdown[4] }}, {{ $array_pages_breakdown[5] }}, {{ $array_pages_breakdown[6] }}],
                backgroundColor: [
                                    'rgba(59, 153, 129, 1.0)',
                                    'rgba(232, 179, 58, 1.0)',
                                    'rgba(214, 212, 209, 1.0)',
                                    'rgba(75, 192, 192, 1.0)',
                                    'rgba(122, 120, 117, 1.0)',
                                    'rgba(224, 33, 81, 1.0)',
                                    'rgba(244, 90, 39, 1.0)'
                                ]

                }]
        },
        options: {
            rotation: (0.5 * Math.PI) - (95/180 * Math.PI),
            responsive: false,
            legend: {
                    position: 'left'
            },
            layout: {
                padding:{
                    left: 30,
                    right: 0,
                    top: 0,
                    bottom: 0
                }
            } 
        } 

    });

This is the output:

Expected output was this:

How can I fix my label to make it a little bigger and decrease the size of my pie? I tried to put fontSize inside my option but it didn't change anything. I want to have those % as well and I tried this, but when I use datapoints on my chart it crashes.

• javascript
• charts
• chart.js

Share Improve this question Follow edited Oct 10, 2018 at 20:36 Worthwelle 1,26911 gold badge1717 silver badges2020 bronze badges asked Oct 10, 2018 at 19:40 Christian GallarminChristian Gallarmin 66055 gold badges1515 silver badges3434 bronze badges 2

• 1 You need to create your own legend, otherwise using chart.js legend this looks difficult. – Kunal Khivensara Commented Oct 11, 2018 at 3:54
• @KunalKhivensara is it? Thank you for the advice. – Christian Gallarmin Commented Oct 11, 2018 at 14:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I don't know whether you looked the documentations on chart.js anyway here I'm posting some ideas that you are looking for.

  options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
}

for enhancement please look at this

You can add this:

options: {
    **maintainAspectRatio : true**, // make the pie small
     legend: {
        display: true,
        labels: {
              **fontSize: 15** //change the size of the labels
        }
    }

}

good luck

本文标签： javascriptHow to Increase the label font size and decrease the size of my pie using chartjsStack Overflow