Vue Reference

Third Party Integrations

Introduction

KeyLines is compatible with many JavaScript frameworks, including Vue. You can write your own Vue component, or you can use the example available in the vue folder when you download KeyLines.

As the majority of Vue applications now use ES6, we use Babel to transpile the ES6 and Vue templates into well-supported JavaScript. You can use our component with modern bundlers such as Webpack or Vite.

Our component is up to date with the latest KeyLines API and regularly tested against the most recent Vue version, so we recommend using the latest version of the component for best performance and compatibility.

To help you get started, we've put together a Vue Tutorial as well as a Vue Integration demo.

Reference

This section explains the kl-chart and kl-timebar components that are specified inside the <template> tag, and it lists all the properties that are available to specify the various elements of the KeyLines chart or time bar.

kl-chart

<kl-chart
  id='string'
  containerClass='string'
  :styleObject='object'
  :data='object'
  :options='object'
  :selection='array'
  @kl-ready='function'
  @kl-all='function'
/>

Property	Type	Description
id	string	The id of the KeyLines component. If not specified, one will automatically be assigned.
containerClass	string	The name of the CSS class to assign to the container `div` of the KeyLines component.
styleObject	object	Object with CSS styles to assign to the container `div` of the KeyLines component.
data	object	The data in KeyLines format that is loaded into the KeyLines component once the component is created. See the Chart API for the required format.
options	object	Overrides the default options of the KeyLines component. See the available Chart options API.
selection	array	An array of ids of items to initially select in the KeyLines component.
animateOnLoad	boolean	Set to true to animate the KeyLines component on data load. Defaults to false.
kl-ready	event	An event which will receive the created KeyLines component in the event handler. Fired once when the KeyLines component is created and ready to use.
kl-all	event	Attaches an event handler that receives every chart event. The event object includes the event name and its payload. Use this when you want to handle multiple chart events with one function.
kl-[event]	function	Attaches event handlers for chart or time bar events prefixed by `kl-`, e.g. `kl-click` or `kl-selection-change`. See also Step 7 of Using KeyLines with Vue and the Chart Events API.

kl-timebar

<kl-timebar
  id='string'
  containerClass='string'
  :styleObject='object'
  :data='object'
  :options='object'
  :selection='array'
  @kl-ready='function'
  @kl-all='function'
/>

Property	Type	Description
id	string	The id of the KeyLines component. If not specified, one will automatically be assigned.
containerClass	string	The name of the CSS class to assign to the container `div` of the KeyLines component.
styleObject	object	Object with CSS styles to assign to the container `div` of the KeyLines component.
data	object	The data in KeyLines format that is loaded into the KeyLines component once the component is created. See the Time Bar API for the required format.
options	object	Overrides the default options of the KeyLines component. See the available Time Bar options API.
selection	array	An array of selection line objects to initially select in the KeyLines component. See the Time Bar Selection API for the required format.
animateOnLoad	boolean	Set to true to animate the KeyLines component on data load. Defaults to false.
kl-ready	event	An event which will receive the created KeyLines component in the event handler. Fired once when the KeyLines component is created and ready to use.
kl-all	event	Attaches an event handler that receives every time bar event. The event object includes the event name and its payload. Use this when you want to handle multiple time bar events with one function.
kl-[event]	function	Attaches event handlers for chart or time bar events prefixed by `kl-`, e.g. `kl-click` or `kl-selection-change`. See also Step 7 of Using KeyLines with Vue and the Time Bar Events API.

Search