{"id":12404,"library":"vue-bar-graph","title":"Vue Bar Graph Component","description":"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.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/lafriks/vue-bar-graph","tags":["javascript","vue","chart","bar"],"install":[{"cmd":"npm install vue-bar-graph","lang":"bash","label":"npm"},{"cmd":"yarn add vue-bar-graph","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-bar-graph","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package is primarily designed for ES Module environments with Vue.js 3. CommonJS `require` syntax is not supported in modern Vue setups.","wrong":"const VueBarGraph = require('vue-bar-graph');","symbol":"VueBarGraph","correct":"import VueBarGraph from 'vue-bar-graph';"}],"quickstart":{"code":"<script setup>\nimport { ref } from 'vue';\nimport VueBarGraph from 'vue-bar-graph';\n\nconst chartPoints = ref([\n  { label: 'Jan', value: 3 },\n  { label: 'Feb', value: 5 },\n  { label: 'Mar', value: 2 },\n  { label: 'Apr', value: 5 },\n  { label: 'May', value: 4 }\n]);\nconst chartWidth = 600;\nconst chartHeight = 300;\n\n// Example of updating data dynamically after a delay\nsetTimeout(() => {\n  chartPoints.value = [\n    { label: 'Jan', value: 10 },\n    { label: 'Feb', value: 8 },\n    { label: 'Mar', value: 12 },\n    { label: 'Apr', value: 6 },\n    { label: 'May', value: 15 },\n    { label: 'Jun', value: 9 }\n  ];\n}, 3000);\n</script>\n\n<template>\n  <div style=\"font-family: Arial, sans-serif; text-align: center; margin-top: 20px;\">\n    <h1>Sales Performance</h1>\n    <p>Data will update after 3 seconds.</p>\n    <vue-bar-graph\n      :points=\"chartPoints\"\n      :width=\"chartWidth\"\n      :height=\"chartHeight\"\n      :show-values=\"true\"\n      :use-custom-labels=\"true\"\n      :show-trend-line=\"true\"\n      trend-line-color=\"#007bff\"\n      trend-line-width=\"2\"\n      bar-color=\"#42b983\"\n      value-color=\"#333\"\n    />\n  </div>\n</template>\n\n<style>\n/* No specific styles required for the component, basic layout is handled by template */\n</style>","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<2.2.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `VueBarGraph` component was imported but not correctly registered with the Vue application or component where it's being used.","error":"Failed to resolve component: vue-bar-graph"},{"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.","cause":"Attempting to use `vue-bar-graph` v2.x (designed for Vue 3) in a Vue.js 2.x project.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'setup') or similar Vue 2 vs Vue 3 incompatibility errors."},{"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.","cause":"The package `vue-bar-graph` is not installed in your project's `node_modules` directory, or the import path is incorrect.","error":"Module not found: Error: Can't resolve 'vue-bar-graph'"}],"ecosystem":"npm"}