fix: Update README

apexcharts · Feb 28, 2019 · 54638d1 · 54638d1
1 parent 4618296
commit 54638d1
Showing 1 changed file with 45 additions and 106 deletions.
diff --git a/readme.md b/readme.md
@@ -11,123 +11,61 @@
 <p align="center"><a href="https://apexcharts.com/javascript-chart-demos/"><img src="https://apexcharts.com/media/apexcharts-banner.png"></a></p>
 
 
-## Download and Installation
+## Installation
 
-##### Installing via npm
+#### Script tag
 
-```bash
-npm install stencil-apexcharts apexcharts
-```
-
-## Usage [WIP]
+- Put a script tag similar to this `<script src='https://unpkg.com/stencil-apexcharts@0.0.1/dist/apex.js'></script>` in the head of your index.html
+- Then you can use the element anywhere in your template, JSX, html etc.
 
-```js
-import Chart from 'stencil-apexcharts'
-```
+#### Node Modules
 
-To create a basic bar chart with minimal configuration, write as follows:
-```javascript
-class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      options: {
-        chart: {
-          id: 'apexchart-example'
-        },
-        xaxis: {
-          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
-        }
-      },
-      series: [{
-        name: 'series-1',
-        data: [30, 40, 45, 50, 49, 60, 70, 91]
-      }]
-    }
-  }
-  render() {
-    return (
-      <Chart options={this.state.options} series={this.state.series} type="bar" width={500} height={320} />
-    )
-  }
-}
-```
+- 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.
 
-This will render the following chart
-<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/"><img src="https://apexcharts.com/media/first-bar-chart.svg"></a></p>
+#### In a stencil-app-starter app
 
-### How do I update the chart? [WIP]
-Simple! Just change the `series` or any `option` and it will automatically re-render the chart.
-<p align="center"><a href="#"><img src="https://apexcharts.com/media/react-chart-updation.gif"></a></p>
+- 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.
 
-View this example on <a href="https://codesandbox.io/s/mzzq3yqjqj">codesandbox</a>
+## Usage
 
+#### JSX
 
-**Important:** While updating the options, make sure to update the outermost property even when you need to update the nested property.
-
-✅ Do this
-```javascript
-this.setState({
-  options: {
-    ...this.state.options,
+```html
+<apex-chart
+  type="bar"
+  series={[{
+    name: 'sales',
+    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
+  }]}
+  options={{
     xaxis: {
-      ...this.state.options.xaxis, {
-        categories: ['X1', 'X2', 'X3']
-      }
+      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
     }
-  }
-})
-```
-
-❌ Not this
-```javascript
-this.setState({
-  options.xaxis.categories: ['X1', 'X2', 'X3']
-})
-```
-
-
-## Props [WIP]
-
-
-| Prop        | Type           | Description  |
-| ------------- |-------------| -----|
-| **series** | Array | The series is an array which accepts object in the following format. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website. |
-| **type** | String  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar`  |
-| **width** | Number/String  | Possible values for width can be `100%` or `400px` or 400 |
-| **height** | Number/String | Possible values for width can be `100%` or `300px` or 300 |
-| **options** | Object | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |
-
-## How to call methods of ApexCharts programatically? [WIP]
-Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on `ApexCharts` global variable directly
-
-Example
-```js
-ApexCharts.exec('stencilchart-example', 'updateSeries', [{
-  data: [40, 55, 65, 11, 23, 44, 54, 33]
-}])
+  }} />
 ```
-More info on the `.exec()` method can be found <a href="https://apexcharts.com/docs/methods/#exec">here</a>
-
-All other methods of ApexCharts can be called this way
 
-## What's included [WIP]
+#### HTML
 
-The repository includes the following files and directories.
-
-```
-stencil-apexcharts/
-├── dist/
-│   ├── stencil-apexcharts.min.js
-│   └── stencil-apexcharts.js
-└── example/
-│   ├── src/
-│   ├── public/
-│   ├── package.json
-│   └── REAMDE.md
-└── src/
-    └── stencil-apexcharts.jsx
+```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>
 ```
 
 ## Development
@@ -136,16 +74,17 @@ stencil-apexcharts/
 
 ```bash
 npm install
+npm install apexcharts
 ```
 
-## Running the example
+#### Running the example
 
-Basic example including update is included to show how to get started using ApexCharts with Stencil easily.
+Basic example is included to show how to get started using ApexCharts with Stencil easily.
 
 To run the examples,
 ```bash
-cd example
 npm install
+npm install apexcharts
 npm run start
 ```