Vue Reference
We recommend using this page together with
Using KeyLines with Vue.
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 tanspile 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-component 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-component
<kl-component
id='string'
containerClass='string'
:styleObject='object'
:data='object'
:animateOnLoad='boolean'
:options='object'
:selection='array'
@kl-click='function'
@kl-ready='function'
/>
| Property | Type | Description |
|---|---|---|
| id | string | The id of the HTML element to replace with the component. This id is required. |
| containerClass | string | The name of the CSS class 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 and Time Bar APIs for the required format. |
| options | object | Overrides the default options of your component's APIs once the component is created. See the available Chart options and Time Bar options APIs. |
| styleObject | object | The object with inline style definitions for the KeyLines component. |
| animateOnLoad | boolean | Set to true to animate the KeyLines component on data load. Defaults to false. |
| selection | array | An array of ids of the items to select on the KeyLines component. |
| events | 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 Chart Events and Time Bar Events APIs. |
| 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. |