Integrate CanvasJS Charts in Your Nuxt.js App

In today's data-centric world, interactive and visually engaging charts are crucial for conveying insights clearly. Nuxt.js, a popular framework for streamlined Vue.js development, allows you to build powerful applications. But by integrating a robust charting library like CanvasJS, you can unlock a new level of data visualization in your Nuxt.js projects. This blog post will equip you with the steps to seamlessly integrate CanvasJS charts, enabling you to create dynamic visualizations that bring your data to life.

Integration Steps

1. Create a Basic Nuxt.js Application
Please check this link for creating basic application in nuxt.js

2. Install CanvasJS Vue Plugin from npm

npm install @canvasjs/vue-charts

3. Register the CanvasJS Vue plugin
To make the CanvasJSChart component available across your Nuxt.js application, register it globally in the plugins directory. Create a new file named canvasjs-vue-charts.client.ts inside the plugins directory and add the following code:

// @ts-ignore
import CanvasJSChart from '@canvasjs/vue-charts';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(CanvasJSChart);
});

Notice the .client suffix on canvasjs-vue-charts.client.ts. This ensures the CanvasJS Vue Chart plugin runs only on the client-side (browser) as CanvasJS relies on browser environment and APIs to function.

4. Create Chart Component for adding CanvasJS Charts
Create file index.client.vue inside page directory and add the following code:

<script>
export default {
  data() {
    return {
      chart: null,
      options: {
        animationEnabled: true,
        title: {
          text: 'CanvasJS Nuxt App Integration',
        },
        data: [
          {
            type: 'column',
            dataPoints: [
              { label: 'apple', y: 10 },
              { label: 'orange', y: 15 },
              { label: 'banana', y: 25 },
              { label: 'mango', y: 30 },
              { label: 'grape', y: 28 },
            ],
          },
        ],
      },
    };
  },
};
</script>
<template>
  <CanvasJSChart :options="options" />
</template>

Notice the .client suffix on index.client.vue. This ensures the chart component runs only on the client-side (browser) as CanvasJS relies on browser environment and APIs to function.

5. Run the Application
Start or restart your Nuxt.js development server using npm run dev (or yarn dev). Now, you should see your column chart within your Nuxt.js application!

Further Enhancements:

Explore the extensive customization options offered by CanvasJS to create visually appealing and informative charts. Refer to this link for more examples.