Bar 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="bar"
      :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>
      <ChartBar :chartData="chartDataBar" :chartOptions="chartOptionsBar" />
  </div>
</template>

<script setup>

const chartDataBar = ref(null);
const chartOptionsBar = ref(null);

const setChartDataBar = () => {
  return {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Sept"],
    datasets: [
      {
        type: "bar",
        label: "Count",
        data: [10, 5, 25, 90, 35, 75, 58, 16],
        backgroundColor: "#5398BE",
        borderColor: "#5398BE",
        borderRadius: [4, 4, 0, 0], // Apply 4px radius to the top corners
      },
    ],
  };
};

const setChartOptionsBar = () => {
  // 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 {
    // maintainAspectRatio: false,
    aspectRatio: 2.5,
    plugins: {
      legend: {
        display: false, // Set to true to show the legend
        labels: {
          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
        },
        afterFit: (scale) => {
          // Set a fixed height for the bars
          scale.height = 38.17 * scale.ticks.length; // Adjust height based on the number of bars
        },
      },
    },
    datasets: {
      bar: {
        borderRadius: [4, 4, 0, 0], // Add 4px radius to the top corners
        barThickness: 38.17, // Set a fixed height for all bars
      },
    },
  };
};

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

const fetchChart = () => {
  chartDataBar.value = setChartDataBar();
  chartOptionsBar.value = setChartOptionsBar();
};

// 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