Interactive-SVG-Charts

Interactive SVG Charts

A modern JavaScript charting library to build interactive charts and visualizations with simple API.

Sponsored by

Browsers support

Firefox
Firefox
Chrome
Chrome
Safari
Safari
Edge
Edge
IE
IE11
31+ ✔ 35+ ✔ 6+ ✔ Edge ✔ IE11 ✔

Download and Installation

Installing via npm
npm install apexcharts <span class="token operator">--</span>save
JavaScript
Direct <script> include

JavaScript

Wrappers for Vue/React/Angular

Integrate easily with 3rd party frameworks

Unofficial Wrappers

Useful links to wrappers other than the popular frameworks mentioned above

Usage

<span class="token keyword">import</span> ApexCharts <span class="token keyword">from</span> <span class="token string">'apexcharts'</span>
JavaScript

To create a basic bar chart with minimal configuration, write as follows:

<span class="token keyword">var</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
  chart<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    type<span class="token punctuation">:</span> <span class="token string">'bar'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  series<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'sales'</span><span class="token punctuation">,</span>
    data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">49</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">91</span><span class="token punctuation">,</span> <span class="token number">125</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  xaxis<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    categories<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1991</span><span class="token punctuation">,</span> <span class="token number">1992</span><span class="token punctuation">,</span> <span class="token number">1993</span><span class="token punctuation">,</span> <span class="token number">1994</span><span class="token punctuation">,</span> <span class="token number">1995</span><span class="token punctuation">,</span> <span class="token number">1996</span><span class="token punctuation">,</span> <span class="token number">1997</span><span class="token punctuation">,</span> <span class="token number">1998</span><span class="token punctuation">,</span> <span class="token number">1999</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApexCharts</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#chart"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
chart<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
JavaScript

This will render the following chart

A little more than the basic

You can create a combination of different charts, sync them and give your desired look with unlimited possibilities. Below is an example of synchronized charts with github style.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares