What is vue-chartjs?

apertureless/vue-chartjs — explained in plain English

Analysis updated 2026-06-26

★ 5,721TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((vue-chartjs))
    What it does
      Wrap Chart.js for Vue
      Charts as Vue components
      Auto-update on data change
    Chart types
      Bar and line
      Pie and doughnut
      All Chart.js types
    Tech stack
      Vue.js
      Chart.js
      TypeScript
    Use cases
      Data dashboards
      Analytics views
      Vue app charts

mindmap root((vue-chartjs)) What it does Wrap Chart.js for Vue Charts as Vue components Auto-update on data change Chart types Bar and line Pie and doughnut All Chart.js types Tech stack Vue.js Chart.js TypeScript Use cases Data dashboards Analytics views Vue app charts

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Drop a bar or line chart into a Vue 3 app by passing your data as component props with minimal setup code.

USE CASE 2

Build a live data dashboard where charts automatically re-render when the underlying reactive data changes.

USE CASE 3

Use any Chart.js chart type inside a Vue application without writing any bridging or lifecycle code yourself.

What is it built with?

TypeScriptVue.jsChart.jsnpm

How does it compare?

	apertureless/vue-chartjs	pyspur-dev/pyspur	iyaja/llama-fs
Stars	5,721	5,721	5,726
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	easy	moderate	moderate
Complexity	2/5	3/5	2/5
Audience	developer	developer	general

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Use, modify, and distribute freely for any purpose including commercial projects under the MIT license.

So what is it?

vue-chartjs is a library that connects two other tools: Vue.js, a framework for building web interfaces, and Chart.js, a popular library for drawing charts and graphs in the browser. On their own, Chart.js and Vue.js each have their own way of thinking about components and data updates. This wrapper takes care of bridging that gap so you can drop a chart directly into a Vue application with very little code. Installing it takes one command, and using it looks like placing any other Vue component on a page. You pass in your data and configuration as properties, and the chart renders. Supported chart types include bar charts, line charts, pie charts, doughnut charts, and others that Chart.js supports. The library handles reactivity, meaning if the data changes, the chart updates automatically without extra code. The README is short and practical. It shows a quickstart example, lists links to documentation on updating charts, accessing the underlying chart object, and accessibility support, and covers migration paths from older versions. The project is open source under the MIT license. This is a utility library for developers building data dashboards or any Vue app that needs visual charts. It does not include its own chart types or design tools, it simply makes Chart.js easier to use within the Vue component model. The README is brief, so anyone looking for advanced configuration options will need to consult the separate documentation site at vue-chartjs.org.

Copy-paste prompts

Prompt 1

I am building a Vue 3 app and want to add a line chart using vue-chartjs. Show me the minimal component setup and how to pass in dataset labels and values.

Prompt 2

How do I make a vue-chartjs chart update automatically when my reactive Pinia or Vuex data changes?

Prompt 3

Show me how to access the underlying Chart.js instance in a vue-chartjs component so I can call Chart.js methods directly for advanced customization.

Frequently asked questions