Line Charts

This guide, will walk you through integrating charts into your Nuxt 3 project using a popular charting library, chart.js, along with primevue chart to integrate it seamlessly into your Vue components.

Alt text

Install Required Packages

First, you need to install chart.js and primevue chart. Run the following command in your terminal:

npm install chart.js
Create a Chart Component

Create a reusable chart component to render charts anywhere in your project. the component code for all type of charts can be gotten on primevue documentation. eg barchart.vue

<template>
  <div>
    <Chart
      type="line"
      :data="chartData"
      :options="chartOptions"
      class="w-full"
    />
  </div>
</template>

<script setup>

const props = defineProps({
  chartData: {
    type: Object,
    required: true,
  },
  chartOptions: {
    type: Object,
    required: true,
  },
  labels: {
    type: Array,
    required: true,
  },
  colors: {
    type: Array,
    required: true,
  },
});

// Local refs to handle prop changes
const localChartData = ref(props.chartData);
const localChartOptions = ref(props.chartOptions);

// Watch for prop changes and update local refs
watch(
  () => props.chartData,
  (newData) => {
    localChartData.value = newData;
  }
);

watch(
  () => props.chartOptions,
  (newOptions) => {
    localChartOptions.value = newOptions;
  }
);
</script>
Using the Chart Component in a Page

Now, let's use the barChart component inside a page, passing dynamic data and options.

Example in a Page (e.g., pages/index.vue):

<template>
  <div>
        <ChartLine
            :chartData="chartDataLine"
            :chartOptions="chartOptionsLine"
          />
  </div>
</template>

<script setup>

const chartDataLine = ref(null);
const chartOptionsLine = ref(null);

const setChartDataLine = () => {
  return {
    labels: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
    datasets: [
      {
        label: "",
        data: [10, 5, 25, 90, 35, 75, 58, 16, 8, 39, 24],
        fill: false, // Remove background color
        borderColor: "#FF6201",
        tension: 0.4, // Make the line curvy
        borderWidth: 2, // Line thickness
        borderCapStyle: "round", // Round the ends of the line
        pointRadius: 0, // Hide data points
      },
    ],
  };
};

const setChartOptionsLine = () => {
  // Set the textColor based on light/dark mode
  const lightTextColor = "#333333";
  const darkTextColor = "#FFFFFF";

  // Check if dark mode is enabled (using the `dark` class on the body or root)
  const isDarkMode = document.documentElement.classList.contains("dark");
  const textColor = isDarkMode ? darkTextColor : lightTextColor;

  return {
    aspectRatio: 2.5,
    plugins: {
      legend: {
        display: false,
        labels: {
          cutout: "50%",
          color: textColor,
        },
      },
    },
    scales: {
      x: {
        ticks: {
          color: textColor,
        },
        grid: {
          display: false, // Remove grid lines for the x-axis
        },
      },
      y: {
        ticks: {
          color: textColor,
        },
        grid: {
          display: false, // Remove grid lines for the x-axis
        },
      },
    },
  };
};

onMounted(() => {
  fetchChart();
  updateChartOptionsOnModeChange();
});

const fetchChart = () => {
    chartOptionsLine.value = setChartOptionsLine();
};

// Watch for dark mode changes and update the chart options
const updateChartOptionsOnModeChange = () => {
  const observer = new MutationObserver(() => {
    chartOptionsBar.value = setChartOptionsBar();
  });

  // Observe changes on the class attribute of the document element
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["class"],
  });
};
</script>
Customize Your Charts

You can customize your charts further by changing the options or using different chart types. Here are a few examples of common chart customizations:

Line Chart, Pie Chart, Doughnut Chart etc

Conclusion With chart.js and primevue chart, you can create a wide variety of interactive and dynamic charts in your Nuxt 3 project. Whether you need simple bar charts or complex radar charts.

Edit this page on GitHub