how to customize chartjs

user_13599524 0
Viewed 84

I'm trying to achieve this look for my chartjs:

enter image description here

And here is my chartjs:

enter image description here

Here is my script tag for chartjs:

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels_most_forked,
            datasets: [{
                label: '# of Votes',
                data: values_most_forked,
                backgroundColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                position: 'right',
               verticalAlign: 'top',
            }
        },
        tooltips: {
            mode: 'label'
        },
      });

<canvas id="myChart" width="180" height="180"></canvas>

I tried to verticalAlign: 'top' for my labels but it's not working and how to make my chart looks bigger?

after add

responsive: true,
maintainAspectRatio: false,

enter image description here

charts css html javascript
1 Answers

Your charts are very likely missing the maintainAspectRatio and responsive options along with the width and height settings in the canvas.

These two settings default both to true which makes it look good on mobile but can cause the pie to look extremely small. See for example this: https://jsfiddle.net/adelriosantiago/bzm38s7u/6/

enter image description here

Add the settings,

options: {
  responsive: true,
  maintainAspectRatio: false,
}

Optionally define a width and height in the canvas like <canvas id="myChart" width="400px" height="500px"></canvas>.

You should get a pie that uses most of the space regardless of the size of the container. Like this: https://jsfiddle.net/adelriosantiago/r2h79vto/2/

enter image description here

More info on these settings here: https://www.chartjs.org/docs/latest/general/responsive.html

user_19960660
Related