Vue.js Chart Component with 30+ Charts & Graphs

Vue Chart Component lets you add interactive Charts & Graphs to your Vue.js applications. Library comes bundled with 30+ chart types including line, column, area, bar, pie, candlestick, etc. It also comes with plenty of features & customizations to suit your application's needs. Below are some of the Vue Chart examples that highlight popular features & use-cases available. Examples are built using Vue.js v3 but chart component works seamlessly in vue.js v2 & above.

Basic Chart

Chart with Animation

Chart with Animation

Chart with Zooming & Panning Support

Chart with Zooming/Panning

Multi Series Chart

Multi Series Chart

Chart with Multiple Axes

Chart with Multiple Axes

Chart with Logarithmic Axis

Chart with Logarithmic Axis

Chart with JSON Data

Chart with JSON Data

Dynamic Chart

Drilldown Chart

Drilldown Chart

Responsive Chart

Responsive Chart

Synchronized Charts

Synchronized Charts

Line Charts in Vue.js

Vuejs Chart Component supports Line, Spline and Step Line Charts.

Vue.js Line Chart with Category Axis

Line Chart with Category Axis

Vue.js Dashed Line Chart

Dashed Line Chart

Vue.js Multi Series Line Chart

Multi Series Line Chart

Vue.js Spline Chart

Vue.js Multi Series Spline Chart

Multi Series Spline Chart

Vue.js Step Line Chart

Step Line Chart

Vue.js Multi-Series Step-Line Chart

Multi-Series Step-Line Chart

Bar Charts in Vue.js

Vuejs Chart Component supports Bar, Stacked Bar, Stacked Bar 100%, etc.

Vue.js Bar Chart with Category Axis

Bar Chart with Category Axis

Vue.js Multi Series Bar Chart

Multi Series Bar Chart

Vue.js Stacked Bar Chart

Stacked Bar Chart

Vue.js Stacked Bar 100% Chart

Stacked Bar 100% Chart

Column Charts in Vue.js

Vuejs Chart Component supports Column, Stacked Column, Stacked Column 100%, etc.

Vue.js Column Chart with Category Axis

Column Chart with Category Axis

Vue.js Column Chart in Dark Theme

Column Chart in Dark Theme

Vue.js Multi Series Column Chart

Multi Series Column Chart

Vue.js Stacked Column Chart

Stacked Column Chart

Vue.js Stacked Column 100% Chart

Stacked Column 100% Chart

Vue.js Stacked Column 100% Chart with Indexlabels

Stacked Column 100% Chart with IndexLabel

Pie & Doughnut Charts in Vue.js

Vuejs Chart Component supports Pie & Doughnut / Donut Charts.

Vue.js Pie Chart with Index / Data Labels

Vue.js Doughnut / Donut Chart

Vue.js Doughnut Chart in Dark Theme

Doughnut Chart in Dark Theme

Area Charts in Vue.js

Vuejs Chart Component supports supports Area, Spline Area, Stacked Area, Stacked Area 100%, Stacked Spline Area 100%, etc.

Vue.js Area Chart with Category Axis

Area Chart with Category Axis

Vue.js Multi Series Area Chart

Multi Series Area Chart

Vue.js Spline Area Chart

Spline Area Chart

Vue.js Multi Series Spline Area Chart

Multi Series Spline Area Chart

Vue.js Step Area Chart

Step Area Chart

Vue.js Stacked Area Chart

Stacked Area Chart

Vue.js Stacked Area 100% Chart

Stacked Area 100% Chart

Range Charts in Vue.js

Vuejs Chart Component supports Range Column, Range Bar, Range Area, Range Spline Area, etc.

Vue.js Range Column Chart

Range Column Chart

Vue.js Multi Series Range Column Chart

Multi Series Range Column Chart

Vue.js Range Bar Chart

Range Bar Chart

Vue.js Multi Series Range Bar Chart

Multi Series Range Bar Chart

Vue.js Range Area Chart

Range Area Chart

Vue.js Multi Series Range Area Chart

Multi Series Range Area Chart

Vue.js Range Spline Area Chart

Range Spline Area Chart

Vue.js Multi Series Range Spline Area Chart

Multi Series Range Spline Area Chart

Bubble and Scatter Charts in Vue.js

Vuejs Chart Component supports Bubble and Scatter Charts.

Vue.js Bubble Chart with 3-Dimensional Data

Bubble Chart with 3-Dimensional Data

Vue.js Bubble Chart in Dark Theme

Bubble Chart in Dark Theme

Vue.js Scatter Chart

Funnel and Pyramid Charts in Vue.js

Vuejs Chart Component supports Funnel & Pyramid Charts.

Vue.js Funnel Chart with Index / Data Labels

Funnel Chart with Index Labels

Vue.js Funnel Chart with Custom Neck

Funnel Chart with Custom Neck Length

Vue.js Pyramid Chart

Financial and Advanced Charts in Vue.js

Vuejs Chart Component supports Candlestick, OHLC, Box & Whisker, Waterfall Charts.

Vue.js Candlestick Chart

Candlestick Chart

Vue.js Multi Series Candlestick Chart

Multi Series Candlestick Chart

Vue.js OHLC Chart

Vue.js OHLC Chart with JSON Data

OHLC Chart with JSON Data

Vue.js Box & Whisker Chart

Box & Whisker Chart

Vue.js Waterfall Chart

Waterfall Chart

Vue.js Combination Charts

Vuejs Chart Component supports Error, Error Line Charts along with combination of many other Charts like Bar, Line, Area, OHLC, etc.

Vue.js Pareto Chart

Vue.js Error Line Chart

Error Line Chart

Vue.js Range Area & Line Chart Combination

Range Area & Line Chart Combination

Vue.js Candlestick & Line Chart Combination

Candlestick & Line Chart Combination

Dynamic Charts in Vue.js

Vuejs Chart Component supports Dynamic Charts also known as Real Time or Live Charts.

Vue.js Dynamic Line Chart

Dynamic Line Chart

Vue.js Dynamic Column Chart

Dynamic Column Chart

Vue.js Dynamic Multi Series Chart

Dynamic Multi Series Chart

StockCharts in Vue.js

Vuejs StockCharts Component supports all Charting features along with Range Selector, Navigator, Multiple Charts, etc.

Vue.js StockChart with Numeric Axis

Vue.js StockChart with Numeric Axis

Vue.js StockChart with Date-Time Axis

StockChart with Date-Time Axis

Vue.js StockChart with Navigator & Range Selector

StockChart with Navigator & Range Selector

View More StockChart Samples

JavaScript, jQuery, React, Angular

Add Responsive & Interactive Chart to your front-end frameworks like JavaScript, jQuery, React, Angular, etc

JavaScript Charts

Server Side Technologies

Integrates easily with PHP, ASP.NET and many other Libraries and Frameworks.

ASP.NET MVC Charts

Spring MVC Charts