Resizing a Chart

Introduction

KeyLines chart and time bar components adapt to fit the size of their parent element in the DOM. Any changes in the size of the parent will be adopted by the chart or time bar, making it easy to manipulate their size and shape.

The KeyLines container

The KeyLines.create() function creates a container that the chart sits inside. So when you create a chart or time bar, that element will be a child of the specified container.

var chart;
KeyLines.create({ container: 'kl-chart' }, function (err, result) {
  chart = result;
  // Load your chart here!
});

Your html element structure should then look something like this:

<div id='kl-chart' style='width:600px; height:500px;'>
  <canvas height="500" width="600" id="KeyLines-chart-1" style="-ms-touch-action: none; touch-action: none; outline: none;" tabindex="8888"></canvas>
</div>

Note that a KeyLines component will not render to a container if the container's css style property has display: none, width = 0 or height = 0.

Styling and CSS

As the chart resizes automatically you should make sure you target your CSS at the container, and not the KeyLines element itself.

As KeyLines elements adapt to fill the size of their parent, we advise using box-sizing to make sizing the chart simpler:

* {
  box-sizing: border-box;
}

KeyLines elements adapt to fit the size of their parent, so you should be aware of other rules in css modules that may interfere with this. Modules such as css grid - where parent elements are sized based on their children - can cause unexpected behaviour.

Fullscreen mode

When you want to put the chart in fullscreen mode, you can use the hierarchy rules of css to control the size of the chart:

HTML

<div id='kl-main' style="width: 800px; height: 600px;">
  <div id='fullScreen'>
    <div id='kl-chart'>
      <canvas id="KeyLines-chart-1"></canvas>
    </div>
  </div>
  <button id='fullscreenBtn'>Fullscreen</button>
</div>

JavaScript

// When the window is loaded
$(window).on('load', function() {

  var chart;

  // Create KeyLines chart as a child of the DOM element with id 'kl-chart'
  KeyLines.create({ container: 'kl-chart', options:{backColour: 'white' } }, function (err, result) {
    chart = result;
    // Load your chart here!
  });

  // Toggle fullscreen mode when the button is clicked
  $('#fullscreenBtn').click(function(evt) {
    if(KeyLines.fullScreenCapable()) {
      KeyLines.toggleFullScreen(document.getElementById('fullScreen'));
    }
  });
});

You can then set the styling for all child elements to inherit from the kl-main div, or select only the fullscreen div to make the chart fill the screen.