Best way to use lightweight-charts package in nuxt project?

Question

I want to use lightweight-charts package in Nuxt project. I couldn't find any examples included in the Nuxt project. I did it with some methods but I don't know what is the best method. What is the correct way to run it on nuxt?

The use of the package on the site is as follows.

import { createChart } from 'lightweight-charts';

const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
]);

https://github.com/tradingview/lightweight-charts

Çağlar Dursun · Answer 1 · 2022-12-24T20:31:22.973

This is could be something like

plugins folder create file: chart.client.ts

import { createChart } from 'lightweight-charts'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.createChart = createChart
})

component folder create file: chart.vue

<template>
    <div class="lw-chart" ref="chartContainer"></div>
</template>

<script setup>
const nuxtApp = useNuxtApp();
const createChart = nuxtApp.createChart;

let chart;
const chartContainer = ref();

onMounted(() => {
    // Create the Lightweight Charts Instance using the container ref.
    chart = createChart(chartContainer.value,{
        layout: {
            background: { color: '#131F2B' },
            textColor: '#fff',
        },
        grid: {
            vertLines: { color: '#1E2F41' },
            horzLines: { color: '#1E2F41' },
        },
    });
    const areaSeries = chart.addAreaSeries();
    areaSeries.setData([
        { time: '2018-12-22', value: 32.51 },
        { time: '2018-12-23', value: 31.11 },
        { time: '2018-12-24', value: 27.02 },
        { time: '2018-12-25', value: 27.32 },
        { time: '2018-12-26', value: 25.17 },
        { time: '2018-12-27', value: 28.89 },
        { time: '2018-12-28', value: 25.46 },
        { time: '2018-12-29', value: 23.92 },
        { time: '2018-12-30', value: 22.68 },
        { time: '2018-12-31', value: 22.67 },
    ]);

    chart.timeScale().fitContent();
});

onUnmounted(() => {
    if (chart) {
        chart.remove();
        chart = null;
    }
});

</script>

<style scoped>
    .lw-chart {
        height: 400px;
    }
</style>

Yes, now you can use component all pages!

score 1 · Accepted Answer · edited Jul 16 '22 at 03:14

There is no example on this one because this is not related to Nuxt anyhow, neither really to Vue but more of a generic JS vanilla question.

Few points:

it's great to import your component only when it's needed aka in your component (and not globally with Nuxt plugins), kudos for this one!
usually, if you want to call an external function, you do this into mounted(), it depends on what you're doing there of course
meanwhile, you should probably use $refs rather than document.body since we're in a state-based framework here
lineSeries.setData could maybe be moved to data and injected afterwards

Best way to use lightweight-charts package in nuxt project?

2 Answers2