Skip to content

apexcharts/stencil-apexcharts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

81 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

License build ver

Stencil.js wrapper for ApexCharts to build interactive visualizations in stencil.

Installation

Script tag

  • Put a script tag similar to this <script src='https://unpkg.com/stencil-apexcharts/dist/apex.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc.

Node Modules

  • Run npm install stencil-apexcharts apexcharts --save
  • Put a script tag similar to this <script src='node_modules/stencil-apexcharts/dist/apex.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc.

In a stencil-app-starter app

  • Run npm install stencil-apexcharts apexcharts --save
  • Add an import to the npm packages: import stencil-apexcharts;
  • Then you can use the element anywhere in your template, JSX, html etc.

Usage

JSX

<apex-chart
  type="bar"
  series={[{
    name: 'sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }]}
  options={{
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    }
  }} />

HTML

<apex-chart></apex-chart>
<script>
  const chart = document.querySelector('apex-chart');
  chart.series = [
    {
      name: 'sales',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ];
  chart.options = {
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    }
  };
</script>

How do I update the chart?

Simple! Just change the series or options and it will automatically re-render the chart.

Properties

Property Attribute Description Type Default
height height Can be 100% or 300px or 300 number | string undefined
options -- The configuration object API (Reference) ApexOptions undefined
series -- The series API (Reference) number[] | { name: string; data: number[] | { x: string; y: number; }[]; }[] undefined
type type Chart type API (Reference) "area" | "bar" | "bubble" | "candlestick" | "donut" | "heatmap" | "histogram" | "line" | "pie" | "radar" | "radialBar" | "scatter" undefined
width width Can be 100% or 400px or 400 number | string undefined

Development

Install dependencies

npm install
npm install apexcharts

Running the example

Basic example is included to show how to get started using ApexCharts with Stencil easily.

To run the examples,

npm install
npm install apexcharts
npm run start

Bundling

npm run build

License

Stencil-ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.