Normally Palatable Mango

    stencil-apexcharts
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    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.

    Install

    npm i stencil-apexcharts

    DownloadsWeekly Downloads

    110

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    2.25 MB

    Total Files

    41

    Last publish

    Collaborators

    • brianlagunas
    • junedchhipa
    • mikaelkaron