Bare bones example of using LightningChart JS in a SvelteKit application.
Application template was created with create-svelte
v5.0.2 in July 2023.
See commit history for exact steps for adding LightningChart JS in. Here's a summary of steps:
npm i @lightningchart/lcjs
- Creating a DIV to house the chart
<!-- routes/+page.svelte -->
<div id="chart"></div>
<style>
#chart {
height: 300px;
}
</style>
- Creating the chart using
onMount
lifecycle function
<!-- routes/+page.svelte -->
<script>
import { onMount } from 'svelte';
import { Themes, lightningChart } from '@lightningchart/lcjs';
onMount(() => {
const container = document.getElementById('chart');
if (!container) {
return;
}
const chart = lightningChart().ChartXY({ container, theme: Themes.light });
return () => {
// This callback is called when the component is destroyed.
chart.dispose();
};
});
</script>
This example passes data to the chart using a simple import from the server, like so:
// routes/+page.server.js
export function load() {
const exampleData = [];
let prevY = 0;
for (let i = 0; i < 100000; i += 1) {
const y = prevY + (Math.random() * 2 - 1);
exampleData.push({ x: i, y });
prevY = y;
}
return { exampleData };
}
<!-- routes/+page.svelte -->
<script>
export let data;
// ...
const lineSeries = chart
.addLineSeries({ dataPattern: { pattern: 'ProgressiveX' } })
.add(data.exampleData);
</script>
- Learn more about SvelteKit
- Learn more about LightningChart JS