Registry / web-framework / vue-bar-graph

vue-bar-graph

JSON →
library2.2.0jsnpmunverified

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.

web-framework
npm install vue-bar-graph
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-BAR-GRAPH
V
vue-bar-graph
web-frameworkjavascriptv2.2.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueBarGraph
✓ import VueBarGraph from 'vue-bar-graph';
✗ const VueBarGraph = require('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.

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>
Debug
Known issues
breakingVersion 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.
affects: >=2.0.0
gotchaPrior 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.
affects: <2.2.0
gotchaVersion 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.
affects: >=2.1.0
Errors
Common errors & fixes
Failed to resolve component: vue-bar-graph
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.
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'
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.
Upgrade
Version history
2.2.0latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
5 hits · last 30 days
node
4
OpenAI (training)
1
Resources
githubhttps://github.com/lafriks/vue-bar-graph ↗
packagehttps://www.npmjs.com/package/vue-bar-graph ↗