6

I'm using ChartJS (v2.1) to create line charts. I don't have a fixed size dataset, and I want the line chart to adjust its width based on how big the dataset is:

Large dataset: enter image description here

Smaller dataset: enter image description here

I want the large dataset to make the chart wider (instead of scaling down to available width). Showing a horizontal scrollbar is an option, but I can't specify the width of the chart as I don't know how big the dataset will be.

Is there an option to set the minimum width between X axis ticks? Or grow the chart automatically? I tried implementing the solution in this question, but I'm unable to determine the width during design time.

My markup:

<div class="chartWrapper">
   <canvas id="f1-chart" class="chart chart-line" chart-data="f1Data" chart-labels="f1Labels" chart-series="f1Series" chart-options="f1Options"></canvas>        
</div>

And chart options:

scope.f1Options = {              
    legend: false,     
    responsive: true,            
    maintainAspectRatio: false
}
Community
  • 1
  • 1
Bora B.
  • 175
  • 2
  • 7
  • The [solution](http://stackoverflow.com/questions/35854244/how-can-i-create-a-horizontal-scrolling-chart-js-line-chart-with-a-locked-y-axis) you gave (and its [fiddle](http://jsfiddle.net/mbhavfwm/)) is working perfectly . What problem do you have ? – tektiv Jul 13 '16 at 08:07
  • @tektiv the width is predefined in that solution as 1200px. If your dataset is very small or too big, the chart scale will be different each time. I want the chart to automatically grow based on the dataset while keeping the same scale. – Bora B. Jul 13 '16 at 11:57
  • 2
    Well you could use the fiddle as a base, and then dynamically change the width of the `canvas` (like `width = 50px * num of values`) – tektiv Jul 13 '16 at 12:03

1 Answers1

-1

I found this on chartjs.org fullWidth Boolean true Marks that this box should take the full width of the canvas (pushing down other boxes) http://www.chartjs.org/docs/#chart-configuration-title-configuration
hope this helps.

jack
  • 59
  • 1
  • 6
  • It doesn't help the OP since it takes the full width of the **canvas**, which is already the case in all graphs from Chart.js, since the value is `true` by default. – tektiv Jul 13 '16 at 08:00