0

Since GitHub is telling me "DO NOT create issues for questions or support requests." and doesn't mention another place to ask a question, I guess this is the place?

If I want to set a specific size for the charts (but not the overall size of the canvas), anyone knows if that is possible to do? My reason is my X Axis labels can get really long, and when that happens, I simply increase the canvas size, but that obviously changes the whole size entirely. So I would like to set separate sizes for the chart area and the x axis label area...

kiradotee
  • 1,205
  • 12
  • 20

1 Answers1

0

With ChartJS

When your labels become little automatically the labels get vertically aligned as shown

And with Both Small and Large Size Label Canvas is consuming me Same Height and Width

width: 430px; height: 215px;

Large Label

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

enter image description here

With Small Label

$scope.labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

enter image description here

HTML

<div class="col-md-4">
  <div style="height:auto; width:auto;">
        <div ng-controller="LinemsoVersionCtrl">
          <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>
        </div>
</div>
</div>

CSS

  .col-md-4 {
    width: 33.33333333%
  }
Mahesh G
  • 1,226
  • 4
  • 30
  • 57
  • It is sort of a workaround for some but in my case the labels are not simply a month of the year, so it's impossible to make them shorter. – kiradotee Oct 13 '17 at 21:46
  • Yes But I feel you can handle easily the height and width using CSS and not depend on chartjs API – Mahesh G Oct 14 '17 at 06:42