MinaMRM
MinaMRM

Reputation: 333

How to make the chart smaller than its container

I'm implementing asp.net core project. I have a pie chart.js. I used outlabel plugin to show labels for each piece of the piechart. Now the problem is how I can make the chart smaller than its container in order to show all the labels completely. Right now after running the project, the console displays half of the few of the labels. My code is like the following:

    <div class="container">
        <div class="row box2">
            <div class="col-xl-9 pie" width="510" height="410" style="position:relative; border:1px solid orange;"> @*padding:20px;*@ @*width="650" height="450"*@
                <canvas class="canvaspie" id="piechart" width="510" height="410" style=" border:1px solid black;"></canvas>  @*width="710" height="520"*@
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
            @*outlabel plugin*@
            <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
    $(function () {
                        var bgcolor= [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(255, 0, 0)',
                                'rgba(0, 255, 0)',
                                'rgba(0, 0, 255)',
                                'rgba(192, 192, 192)',
                                'rgba(255, 255, 0)',
                                'rgba(255, 0, 255)'
                            ];
                         var commonbordercolor = [
                                '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)',
                                'rgba(255, 0, 0)',
                                'rgba(0, 255, 0)',
                                'rgba(0, 0, 255)',
                                'rgba(192, 192, 192)',
                                'rgba(255, 255, 0)',
                                'rgba(255, 0, 255)'
                            ];


                        var ctx = document.getElementById("piechart").getContext('2d');
                        var data = {
                                labels: @Html.Raw(XLabels),
                                datasets: [{
                                    label: "pie chart",
                                    backgroundColor: bgcolor,
                                    borderColor: commonbordercolor,
                                    borderWidth: 1,
                                    data: @Html.Raw(YValues)
                          }]
                            };

                            var options = {
                                responsive: false,
                                maintainAspectRatio: false,
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            min: 0,
                                            beginAtZero: true
                                        },
                                        gridLines: {
                                            display: true,
                                            color: "rgba(255,99,164,0.2)"
                                        }
                }],
                                    xAxes: [{
                                        ticks: {
                                            min: 0,
                                            beginAtZero: true
                                        },
                                        gridLines: {
                                            display: false
                                        }
                                    }]
                    },
                                //===================================new outlabel implementation
                                //outlabel implementation
                                zoomOutPercentage: 55, // makes chart 55% smaller (50% by default, if the preoprty is undefined)
                            plugins: {
                            outlabels: {
                                text: '%l %p',
                                color: 'black',
                                stretch: 45,
                                font: {
                                    resizable: true,
                                    minSize: 12,
                                    maxSize: 18
                                }
                            }
                        }
                                //===================================

        };

                       var myChart = new  Chart(ctx, {
                           options: options,
                                data: data,
                                type:'pie'

                       });
 </script>
        <style>
            .container, .box1,box2,box3 {
                /*display: block;*/
                /*padding: 10px;*/
                margin-bottom: 50px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1*/
                text-align: justify;

            }
            .container{
                border:1px solid red;
                display: block;
                }

            .box2{
                border:1px solid purple;
                padding-top: 60px;
                background-color: yellowgreen;
                padding-bottom: 60px;
                /*padding-right:40px;
                padding-right:40px;
                padding-left:40px;*/
                margin-top:40px;
                margin-right:40px;
                display: inline-block;
                /*float:left;*/
            }

        </style>

Upvotes: 1

Views: 1187

Answers (1)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11283

There was similar issue on github

One workaround is to use layout option

new Chart(ctx, {
  ...,
  layout: {
    padding: 100
  }
}

Example

$(function() {
  var bgcolor = [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
  ];
  var commonbordercolor = [
    '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)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
  ];


  var ctx = document.getElementById("piechart").getContext('2d');
  var data = {
    width: 100,
    height: 100,
    labels: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
    datasets: [{
      label: "pie chart",
      backgroundColor: bgcolor,
      borderColor: commonbordercolor,
      borderWidth: 1,
      data: [20, 40, 30, 10, 50, 15, 10]
    }]
  };

  var options = {
    responsive: false,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          beginAtZero: true
        },
        gridLines: {
          display: true,
          color: "rgba(255,99,164,0.2)"
        }
      }],
      xAxes: [{
        ticks: {
          min: 0,
          beginAtZero: true
        },
        gridLines: {
          display: false
        }
      }]
    },
    legend: {
        display: false
    },
    layout: {
      padding: 100
    },
    zoomOutPercentage: 55,
    plugins: {
      outlabels: {
        text: '%l %p',
        color: 'black',
        stretch: 45,
        font: {
          resizable: true,
          minSize: 12,
          maxSize: 18
        }
      }
    }
  };

  var myChart = new Chart(ctx, {
    options: options,
    data: data,
    type: 'pie'

  });
})
.container,
.box1,
box2,
box3 {
  margin-bottom: 50px;
  text-align: justify;
}

.container {
  display: block;
}

.box2 {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
<div class="container">
  <div class="row box2">
    <div class="col-xl-9 pie" width="510" height="410" style="position:relative;">
      <canvas class="canvaspie" id="piechart" width="410" height="410"></canvas>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions