Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

stencil-apexcharts

Package Overview
Dependencies
Maintainers
2
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stencil-apexcharts

Stencil Component for ApexCharts

  • 2.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
98
decreased by-7.55%
Maintainers
2
Weekly downloads
 
Created
Source

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

PropertyAttributeDescriptionTypeDefault
heightheightCan be 100% or 300px or 300number | stringundefined
options--The configuration object API (Reference)ApexOptionsundefined
series--The series API (Reference)number[] | { name: string; data: number[] | { x: string; y: number; }[]; }[]undefined
typetypeChart type API (Reference)"area" | "bar" | "bubble" | "candlestick" | "donut" | "heatmap" | "histogram" | "line" | "pie" | "radar" | "radialBar" | "scatter"undefined
widthwidthCan be 100% or 400px or 400number | stringundefined

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.

Keywords

FAQs

Package last updated on 20 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc