# Introduction
Vue Charts.css replaces traditional JS charting libraries by using a CSS framework underneath that allows front-end developers to build beautiful charts with full accessibility and no hassle. This wrapper encourages front-end developers to make their charts interactive and reactive.
# So why a Vue JS Wrapper?
This wrapper allows the developer to focus more on making data interactive, but still gain the benefits of huge control over how the charts are styled using CSS.
The underlying framework is geared for pure CSS and this wrapper encourages an easy way to add interactivity too.
# How It Works
The web uses HTML for structure, CSS for styling and JS for functionality. When displaying data the same rules apply - we should use HTML to store the data, CSS to style the structural HTML elements, and JS to provide functionality.
With a few simple vue directives and optionally CSS classes you can turn your data into a visually appealing chart. The framework underneath this wrapper is developer-friendly making it easy to customize every element with simple CSS selectors.
The framework and this wrapper allow you to spin up simple or bespoke charts with incredible ease.
# Alternatives
The web offers many charting libraries. They all use JS to render the data. Each implement different strategy like VML, SVG, HTML canvas, image generators and others methods.
Traditional chart libraries heavily dependent on JS. They unnecessarily complicate the visualization process with an endless lists of properties and methods.
In addition, large JS libraries usually affect your site performance. Search engines having trouble reading the data stored in JS objects. And many old solutions are not always accessible to screen readers.
Some libraries fixed search engines visibility by injecting HTML nodes. Accessible issues fixed with additional JS solutions. But in most cases those patches lead to more background processing, affecting page performance.
With CSS frameworks, all this is not required. The raw data is part of the HTML making it visibility to search engines and screen readers. With CSS, rendering is not required, resulting in performance boost compare to JS solutions.
With this wrapper, we introduce the best of both worlds: providing simple JavaScript interactivity and the benefits of using a CSS Framework. When designing interactivity, the smart developer wants to avoid writing long chains of procedural JavaScript. Vue Chart.CSS provides the developer with the simple tools to spin up CSS based charts that respond to changing data, seamlessly.
# Which is Better
There is no better solution, it all depends on your needs and the capabilities of the solution you choose.
Should you abandon your current JS charting library? Not necessarily. Each library has it's own advantage and use cases. You need to define your needs, and find a solution that matches those needs.
When should you consider migrating to Vue Charts.css? In most cases, you need a simple chart displaying your data, or you need more control over how your chart visually renders. In these cases there is no sense to load heavier JS libraries. For complex charts with special behaviours not covered by Charts.css (or Vue Charts.css) you should search for JS alternatives.
# Get Started
To start using Vue Charts.css see the installation page and read the usage page explaining how to structure your data and apply CSS classes.
# License
Vue Charts.css and Charts.css are licensed under the MIT license (opens new window).
The author(s) of Vue Charts.css are not the creator(s) of Charts.css and have no direct affiliation.