Vue Bar Graph Component

2.2.0 · active · verified Sun Apr 19

Vue Bar Graph is a lightweight and simple SVG component designed for creating interactive bar charts within Vue.js applications without introducing heavy third-party charting libraries. This approach significantly minimizes bundle size and external dependencies, making it ideal for projects where performance and a small footprint are critical. The current stable version, 2.2.0, is specifically built for Vue.js 3, with older 1.x versions available for Vue.js 2.x projects. The package provides features such as automatic animation on prop updates, configurable custom labels for both X and Y axes, value display, and an optional linear trendline. Its release cadence is moderate, focusing on stability, bug fixes (like reactivity issues in v2.2.0), and dependency updates, following a major migration to Vue 3 in v2.0.0. It differentiates itself through its minimalist design and direct Vue integration, avoiding the overhead of larger charting ecosystems.

Common errors

```
Failed to resolve component: vue-bar-graph
```
cause The `VueBarGraph` component was imported but not correctly registered with the Vue application or component where it's being used.

fix Ensure `VueBarGraph` is listed in the `components` option of your Vue component, or registered globally via `app.component('VueBarGraph', VueBarGraph)` if using a global instance.
```
Uncaught TypeError: Cannot read properties of undefined (reading 'setup') or similar Vue 2 vs Vue 3 incompatibility errors.
```
cause Attempting to use `vue-bar-graph` v2.x (designed for Vue 3) in a Vue.js 2.x project.

fix If your project is Vue 2, downgrade to `vue-bar-graph` version 1.x using `npm i vue-bar-graph@^1.0.0`. If you intend to use Vue 3, ensure your project is properly migrated to Vue 3.
```
Module not found: Error: Can't resolve 'vue-bar-graph'
```
cause The package `vue-bar-graph` is not installed in your project's `node_modules` directory, or the import path is incorrect.

fix First, install the package using `npm i vue-bar-graph` or `yarn add vue-bar-graph`. Then, verify that the import statement `import VueBarGraph from 'vue-bar-graph';` is correctly spelled and placed.

Warnings

breaking Version 2.0.0 introduced a breaking change by migrating the component to Vue.js 3. Projects using Vue.js 2.x must use `vue-bar-graph` version 1.x.
Fix: For Vue 2 projects, install `npm i vue-bar-graph@^1.0.0`. For Vue 3 projects, ensure you are using `vue-bar-graph` version 2.x or higher.
gotcha Prior to version 2.2.0, there were potential reactivity issues with the `points` prop (referred to internally as `dataPoints` in changelog). If complex data structures for `points` did not update as expected, it was likely due to insufficient deep watching.
Fix: Upgrade to version 2.2.0 or later to benefit from the fix for deep watching on the `points` prop. Alternatively, ensure your `points` data is immutably updated for Vue's reactivity system.
gotcha Version 2.1.0 removed an internal 'license incompatible animation library dependency'. If you were relying on specific animation behaviors that were implicitly provided by this dependency, they might have changed or been removed.
Fix: Review your charts after upgrading to v2.1.0 to ensure animations behave as expected. If specific animations are missing, you may need to implement them custom or explore alternatives.

Install

npm install vue-bar-graph npm
yarn add vue-bar-graph yarn
pnpm add vue-bar-graph pnpm

Imports

VueBarGraph
wrong:
```
const VueBarGraph = require('vue-bar-graph');
```
correct:
```
import VueBarGraph from 'vue-bar-graph';
```
This package is primarily designed for ES Module environments with Vue.js 3. CommonJS `require` syntax is not supported in modern Vue setups.

Quickstart

This example demonstrates how to integrate `vue-bar-graph` into a Vue 3 Single File Component (SFC) using the Composition API. It showcases defining data points with custom labels, setting dimensions, enabling value display, adding a trend line, and dynamically updating the chart data, which triggers automatic animations.

<script setup>
import { ref } from 'vue';
import VueBarGraph from 'vue-bar-graph';

const chartPoints = ref([
  { label: 'Jan', value: 3 },
  { label: 'Feb', value: 5 },
  { label: 'Mar', value: 2 },
  { label: 'Apr', value: 5 },
  { label: 'May', value: 4 }
]);
const chartWidth = 600;
const chartHeight = 300;

// Example of updating data dynamically after a delay
setTimeout(() => {
  chartPoints.value = [
    { label: 'Jan', value: 10 },
    { label: 'Feb', value: 8 },
    { label: 'Mar', value: 12 },
    { label: 'Apr', value: 6 },
    { label: 'May', value: 15 },
    { label: 'Jun', value: 9 }
  ];
}, 3000);
</script>

<template>
  <div style="font-family: Arial, sans-serif; text-align: center; margin-top: 20px;">
    <h1>Sales Performance</h1>
    <p>Data will update after 3 seconds.</p>
    <vue-bar-graph
      :points="chartPoints"
      :width="chartWidth"
      :height="chartHeight"
      :show-values="true"
      :use-custom-labels="true"
      :show-trend-line="true"
      trend-line-color="#007bff"
      trend-line-width="2"
      bar-color="#42b983"
      value-color="#333"
    />
  </div>
</template>

<style>
/* No specific styles required for the component, basic layout is handled by template */
</style>

view raw JSON →