apexcharts / react-apexcharts

📊 React Component for ApexCharts

React.js wrapper for ApexCharts to build interactive visualizations in react.

Download and Installation

Installing via npm

npm install react-apexcharts apexcharts

Usage

import Chart from 'react-apexcharts'

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

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, 1999]
        }
      },
      series: [{
        name: 'series-1',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
      }]
    }
  }
  render() {
    return (
      <Chart options={this.state.options} series={this.state.series} type="bar" width={500} height={320} />
    )
  }
}

This will render the following chart

How do I update the chart?

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

View this example on codesandbox

Important: While updating the options, make sure to update the outermost property even when you need to update the nested property.

✅ Do this

this.setState({
  options: {
    ...this.state.options,
    xaxis: {
      ...this.state.options.xaxis,
      categories: ['X1', 'X2', 'X3']
    }
  }
})

❌ Not this

this.setState({
  options.xaxis.categories: ['X1', 'X2', 'X3']
})

Props

Prop	Type	Description
series	Array	The series is a set of data. To know more about the format of the data, checkout Series docs on the website.
type	String	line, area, bar, pie, donut, scatter, bubble, heatmap, radialBar
width	Number or String	Possible values for width can be 100%, 400px or 400 (by default is 100%)
height	Number or String	Possible values for height can be 100%, 300px or 300 (by default is auto)
options	Object	The configuration object, see options on API (Reference)

How to call methods of ApexCharts programmatically?

Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on ApexCharts global variable directly

Example

ApexCharts.exec('reactchart-example', 'updateSeries', [{
  data: [40, 55, 65, 11, 23, 44, 54, 33]
}])

More info on the .exec() method can be found here

All other methods of ApexCharts can be called this way

What's included

The repository includes the following files and directories.

react-apexcharts/
├── dist/
│   ├── react-apexcharts.min.js
│   └── react-apexcharts.js
└── example/
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── README.md
└── src/
    └── react-apexcharts.jsx

Development

Install dependencies

npm install

Running the example

Basic example including update is included to show how to get started using ApexCharts with React easily.

To run the examples,

cd example
npm install
npm run start

Bundling

To build for Development

npm run dev-build

To build for Production

npm run build

License

React-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.

react-apexcharts's Issues

TypeScript typings

Hi,

I am trying to use this package with a new create-react-app --typescript project, however there's no typings for this package on npm so I've tried to make my own.

So far in react-apexcharts.d.ts I have:

/// <reference types="react" />

declare module "react-apexcharts" {
  class Chart extends React.Component<any> {}

  export default Chart;
}

But this fails pretty much instantly at:

Function.checkComboSeries
node_modules/babel-loader/lib/index.js??ref--6-oneOf-2!/Users/me/code/running/node_modules/apexcharts/dist/apexcharts.esm.js:3972
  3969 | var comboChartsHasBars = false; // if user specified a type in series too, turn on comboCharts flag
  3970 | 
  3971 | if (series.length && typeof series[0].type !== 'undefined') {
> 3972 |   comboCharts = true;
       | ^  3973 |   series.forEach(function (s) {
  3974 |     if (s.type === 'bar' || s.type === 'column') {
  3975 |       comboChartsHasBars = true;

Not 100% sure where to start debugging this, does anyone have any ideas?

apexcharts/dist/apexcharts.common not found

there is a require to apexcharts/dist/apexcharts.common which doesn't exist

No way to turn off legend point stroke width

Hello,

when I set legend.markers.strokeWidth to 0 (which is default by the way), marker has still somehow stroke-width property set.

Timestamp is not being sent x-axis labels formatter function

Hello,

I don't receive any timestamp (is undefined) in options.xaxis.labels.formatter:Function.

~ P.N.

Document of undefined

Hello!
Is react-apexcharts support Server Side Rendering?
Now i have the following error module.exports = root.document ? factory(root, root.document) : function (w) {

Changing the HeatMap's Color Range causes "black spots" and incorrect color rendering to happen.

Hi there!

Thing is that on my component which all what it does is to receive and pass the data onto your heatMap chart I did add a function which adjusts the chart's Color Range depending on the data so a min, mid and max value to be accurately calculated and displayed onto the chart and whenever that process is executed then, it seems like if the chart does completely ignore the new Color Range and it displays black spots on values which are didn't exist on the last Color Range.

Please do let me know if you know any workaround for this please.

Thank you!

bar charts in multi chart not displaying correctly

Here's what I'm getting

The bar should only cover the one data point, but it fills the entire graph.
It should be simple to get these bars to show up correctly but they're not showing up right. When you hover over the bar, it starts glitching out.

when you click to remove the first dataset from the graph, it also removes the second dataset from the graph. Please give me some guidance here, I've been banging my head against the wall trying to figure this one out. The docs have not been much help either.

here's the data:

My first series: data: [{x: "15-Jan-19", y: 3}], type: line
second series: data: [{x: "15-Jan-19", y: 2}], type: bar

yaxis and annotations are generated before this based on the data.

options = {
chart: {
fontFamily: 'Quicksand, Times New Roman, Times, serif, sans-serif',
toolbar: { show: false },
zoom: { enabled: false },
},
markers : { size: [5,5] },
stroke: { size: [5,5],
dataLabels: { enabled: false },
selection: { enabled: false },
tooltip: {
enabled: true,
shared: true,
followCursor: false,
fixed: {
enabled: true,
position: 'top'
}
},
plotOptions: {
bar: {
horizontal: false,
endingShape: 'flat',
columnWidth: '70%',
barHeight: '70%',
distributed: true
}
},
xaxis: {
type: 'datetime',
crosshairs: { show: true },
tooltip: { enabled: false },
max: Date.now(),
min,
},
yaxis,
annotations,
}

TypeError: this.chart.render is not a function

I saw a bunch of TypeScript issues around in this repo and apexcharts repo. But still couldn't solve my problem.
I'm integrating this React ApexChart lib into my TypeScript app. But after I import the component. I got this error. and the page is broken. Below is my code:

import Chart from 'react-apexcharts';

interface ApexChartProps {}

interface ApexChartState {
    options?: any;
    series?: any;
}

export class ApexChart extends React.Component<ApexChartProps, ApexChartState> {
    constructor(props: ApexChartProps) {
        super(props);
        this.state = {
            options: {
              chart: {
                id: 'basic-bar',
              },
              xaxis: {
                categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
              },
            },
            series: [
              {
                name: 'series-1',
                data: [30, 40, 45, 50, 49, 60, 70, 91],
              },
            ],
        };
    }

    public render(): React.ReactNode {
        return (
            <>
                <div className="app">
                    <div className="row">
                        <div className="mixed-chart">
                            Apex Chart
                            <Chart
                                options={this.state.options}
                                series={this.state.series}
                                type="bar"
                                width="500"
                                height="600"
                            />
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

Can anyone share some thoughts?

Leader Labels on Donut/Pie Chart and Persist Value onClick

An option to provide leader labels with values to pie/donut chart.
Other than that the chart shows value of a portion only when hovered upon. It must also persist the value when a portion is selected.

Non compatible with react older than 16.3

Hi;

First of all, thank you for this wrapper. I was about to use it on my project when I was greeted with this error message:

TypeError: React.createRef is not a function

The createRef() API, used here, was introduced in React 16.3.0 (Changelog), thus making this library incompatible with prior versions.

It would be nice if this was backward compatible with older versions, as v16.3.0 is fairly recent (March/2018).

In order to achieve this, I would suggest one from the following options:

1. Use the Callback Ref construct instead, which remains compatible with newer versions OR. at least use it only if the createRef() API is not detected
2. Use a Polyfill for the createRef() API, like this
3. At least, warn users of this limitation in the README. I had to look into an error message and dig into it to discover what went wrong.

I may submit a PR, if I'm able to implement the first approach.

xaxis title - color setting not working

text and fontSize properties working as expected, but color does not. The text element's fill is what needs to be affected. It is currently being generated as an inline style, so adding a cssClass property does not allow you to overwrite it in that way. Currently solving the issue by targeting the element after render and updating it's inline styles through javascript.

xaxis: {
          title: {
            text: "Count",
            style: {
              color: "#888",
              fontSize: "14px"
            }
          }
       }

TypeError: clone.node.getBBox is not a function

Hi, I have a console warning I was hoping someone could help me with.
When using apex charts heatmap I get a long callstack console warning.
I'm doing a smoke test on the component with jest to make sure it renders properly.
I also tested for the example code for React heatmap on the apex charts webpages and I get same warning.

console.warn node_modules/apexcharts/dist/apexcharts.common.js:14260
TypeError: clone.node.getBBox is not a function
at new create (path\node_modules\apexcharts\dist\apexcharts.common.js:21109:30)

And then the callstack continues a bit before another warning:

console.warn node_modules/apexcharts/dist/apexcharts.common.js:14260
TypeError: this.node.getScreenCTM is not a function
at create.screenCTM (path\node_modules\apexcharts\dist\apexcharts.common.js:21342:41)

And the callstack continues again.

Anyone have an idea of what might be the problem?

Solid border type of annotation doesn't work

Hey,

when I set options.annotations.xaxis borderType to solid (should be default tho) it's still dashed.

TypeError: _apexcharts2.default.merge is not a function

Explanation

I'm integrating this React ApexChart lib into my TypeScript app. Maybe I'm not doing the right way. Or There's some TypeScript type definition issue with the library.

I followed a basic example from react-apex-chart and then set it up with my TypeScript app. below is the code:

import * as React from 'react';
import Chart from 'react-apexcharts';

interface ApexChartProps {}

interface ApexChartState {
    options?: any;
    series?: any;
}

export class ApexChart extends React.Component<ApexChartProps, ApexChartState> {
    constructor(props: ApexChartProps) {
        super(props);
        this.state = {
            options: {
              chart: {
                id: 'basic-bar',
              },
              xaxis: {
                categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
              },
            },
            series: [
              {
                name: 'series-1',
                data: [30, 40, 45, 50, 49, 60, 70, 91],
              },
            ],
        };
    }

    public render(): React.ReactNode {
        return (
            <>
                <div className="app">
                    <div className="row">
                        <div className="mixed-chart">
                            Apex Chart
                            <Chart
                                options={this.state.options}
                                series={this.state.series}
                                type="bar"
                                width="500"
                                height="600"
                            />
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

But after I import the component. I got this error. and the page is broken.

Can anyone share some thoughts?

Options are not updating

Options are not updating

Feature request: Full-controlled component

Just a suggestion: It would be pretty useful, if these charts could be fully-controlled, i.e. could store their state externally, so we could programmatically react to users interactions with them (e.g. zooming in and out, etc.) or change theirs state the way users do it.

Donut Title

Hi,

How it is possible to change the center text in a Donut Chart? I tried it with PlotOptions, Datalabels, and Tooltip.

How can I get the element that is printed in the center (when I hover a pieSlice)?

What I want to achieve: I want to init the Donut with an empty space in the center (nothing should be shown). When I hover a pieSlice, I want to show an Image.

My actual options and series:

    const series = [44, 55, 41, 17, 15];
    const options = {
      labels: ['a', 'b', 'c', 'd', 'e'],
      legend: {
        show: true,
        showForSingleSeries: true,
        position: 'bottom',
        horizontalAlign: 'center',
        verticalAlign: 'middle',
        floating: false,
        fontSize: '14px',
        textAnchor: 'start',
        useSeriesColors: false,
      },
      onItemClick: {
        toggleDataSeries: true,
      },
      onItemHover: {
        highlightDataSeries: true,
      },
      dataLabels: {
        enabled: true,
      },
      theme: {
        monochrome: {
          enabled: true,
          color: '#00e2b8',
          shadeTo: 'dark',
          shadeIntensity: 0.8,
        },
      },
    };

Can't see labels using type: 'datetime' on xaxis property

Hi, I have an area chart that shows prices. The data look like this:
[ {x: 1549805984457, y: 100}, {x: 1549806001870, y: 110}, ]

Where the 'x' property means a Date converted into miliseconds. The problem is that, when I try to use the xaxis with this properties:

xaxis: { type: 'datetime', labels: { show: true, style: { fontWeight:100, fontSize: '0.75rem', colors: ['white'] } }, axisBorder: { show: true } }

I see nothing on my xaxis. If I remove the type:'datetime' property, I can see the values going from 0 up to my array length.

I declare my Chart element like this:

<Chart options={graphOptions.options} series={graphOptions.series} type="area" width="100%" height="350px" />

Versions:

"apexcharts": "^2.6.0",
"react-apexcharts": "^1.2.1",

Browser:
Google Chrome v71.0.3578.98 (Build oficial) (64 bits)

How can I set chart margin for sparkline

I'm trying to change de default "margin" ( translate(10, 10) ) of sparkline to zero but I dont found anything about on docs.

Here a example what I need to do https://apexcharts.com/javascript-chart-demos/dashboards/modern/

Failing Jest test

🐛 Bug Report

react-apexcharts in the version 1.1.0 is failing the Jest tests

To Reproduce

$ npm i [email protected]

• Import Chart from react-apexcharts into a component, and create some logic for testing.
• Create a .test.js file for the previous component
• run:

$ npm test a

Expected behavior

Is expected to fail all tests of the components that are related directly or not with the component that is importing Chart from react-apexcharts, even using enzyme's shallow, for an isolated component rendering for testing.

FAIL
 ● Test suite failed to run
<test_path>/node_modules/react-apexcharts/dist/react-apexcharts.min.js:1

    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import ApexCharts from"apexcharts";import React,{Component}from"react";import PropTypes from"prop-types";var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var s in r)Object.prototype.hasOwnProperty.call(r,s)&&(t[s]=r[s])}return t};function _objectWithoutProperties(t,e){var r={};for(var s in t)e.indexOf(s)>=0||Object.prototype.hasOwnProperty.call(t,s)&&(r[s]=t[s]);return r}class Charts extends Component{constructor(t){super(t),React.createRef?this.chartRef=React.createRef():this.setRef=(t=>this.chartRef=t),this.chart=null}render(){const t=_objectWithoutProperties(this.props,["type","width","height","series","options"]);return React.createElement("div",_extends({ref:React.createRef?this.chartRef:this.setRef},t))}componentDidMount(){const t=React.createRef?this.
    
    SyntaxError: Unexpected token import

@RochaCarla

Line chart redraws from scratch on updateSeries

data contains multiple series:

[
{name: 'foo', data: [{x,y}] }
{name: 'bar', data: [{x,y}] }
...
]

Data of each series get periodically appended with a new value and then the updateSeries is called:

ApexCharts.exec('realtime', 'updateSeries', data)

I'd like to chart to animate from existing paths, not re-draw from scratch each time.
What am I doing wrong here?

https://i.gyazo.com/451436f7dd1094023d80389446dc6611.mp4

Crashes on every unmount

When I unmount the component I get the following error:

Uncaught TypeError: Cannot read property 'id' of undefined
    at Charts.componentWillUnmount (react-apexcharts.js:71)
    at callComponentWillUnmountWithTimer (react-dom.development.js:9703)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at safelyCallComponentWillUnmount (react-dom.development.js:9710)
    at commitUnmount (react-dom.development.js:9956)
    at commitNestedUnmounts (react-dom.development.js:9992)
    at unmountHostComponents (react-dom.development.js:10279)
    at commitDeletion (react-dom.development.js:10329)
    at commitAllHostEffects (react-dom.development.js:11413)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:11559)
    at completeRoot (react-dom.development.js:12502)
    at performWorkOnRoot (react-dom.development.js:12452)
    at performWork (react-dom.development.js:12370)
    at performSyncWork (react-dom.development.js:12347)
    at interactiveUpdates (react-dom.development.js:12597)
    at interactiveUpdates (react-dom.development.js:1958)
    at dispatchInteractiveEvent (react-dom.development.js:4259)

I did not pass an id in the options, but if I do:

<Chart
  options={{
    chart: {
      id: 'hello',
    },
    ...
  }}
/>

I get:

react-apexcharts.js:71 Uncaught TypeError: this.state.chart.exec is not a function
    at Charts.componentWillUnmount (react-apexcharts.js:71)
    at callComponentWillUnmountWithTimer (react-dom.development.js:9703)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at safelyCallComponentWillUnmount (react-dom.development.js:9710)
    at commitUnmount (react-dom.development.js:9956)
    at commitNestedUnmounts (react-dom.development.js:9992)
    at unmountHostComponents (react-dom.development.js:10279)
    at commitDeletion (react-dom.development.js:10329)
    at commitAllHostEffects (react-dom.development.js:11413)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:11559)
    at completeRoot (react-dom.development.js:12502)
    at performWorkOnRoot (react-dom.development.js:12452)
    at performWork (react-dom.development.js:12370)
    at performSyncWork (react-dom.development.js:12347)
    at interactiveUpdates (react-dom.development.js:12597)
    at interactiveUpdates (react-dom.development.js:1958)
    at dispatchInteractiveEvent (react-dom.development.js:4259)

And I think I should not have to pass an id anyway, an autogenerated one is enough no?

Multiple Y-Axis options leaves blank space when chart labels set to false

Hello (it's me again),

when I use mixed charts options and set y-axis labels to false, chart is still padded to right (somehow even more than before) forcing me to set negative left grid padding.

Thanks for taking a look at it :)

Updating options doesn't update chart when all series hidden

I cannot replicate this issue easily into minimal example but following thing happens:

1. I disable all series by unchecking them in legend
2. I change axis.min timestamp date (by changing some filter on our site, eg. from displaying data from 30 days ago to only 7 days ago)
3. I enable all series again but they just appear for a split of a second and then they stay invisible (tooltip somehow works)

Miscalculating Bar Position

I couldn't find how this could happen so I decided to ask here:

As you can see, bar positions are shifted. My options:

<Chart options={options} series={series} type="bar" width="100%" height={400} { ...rest } />

options: {
	chart: {
		id: 'campaign-chart',
		type: 'bar',
		height: 400,
		stacked: false,
	},
	dataLabels: {
		enabled: false,
	},
	yaxis: [
		{
			seriesName: 'Number of Clicks',
			labels: {
				style: {
					color: '#6d7782',
				}
			},
			title: {
				text: 'Number of Clicks',
			},
			min: 0,
		},
	],
},

Do you have any idea how this could happen? There is no CSS affecting the graph.

Labels in Donut Chart to show Name not Value

Hi,

as the headline says. Is it possible to show the Name and not the Value in the Donut Chart?
At the moment I have a series with [50, 50] and labels with [Series1, Series2]. The Donut shows me 50% and 50% in the Donut. But I want to show Series 1 and Series 2 in the segment in the Donut.

Any options to do that?

Several Options don't work

Hello,

I wanted to test the lib, but I can't get any further on the options.

I set the following options:

const options = {
  chart: {
    height: 'auto',
    toolbar: {
      show: true,
      tools: {
        download: true,
        selection: true,
        zoom: true,
        zoomin: true,
        zoomout: true,
        pan: true,
        reset: true,
      },
      autoSelected: 'zoom',
    },
    zoom: {
      enabled: true,
      type: 'x',
      zoomedArea: {
        fill: {
          color: '#90CAF9',
          opacity: 0.4,
        },
        stroke: {
          color: '#0D47A1',
          opacity: 0.4,
          width: 1,
        },
      },
    },
  },
  xaxis: {
    categories: [
      1991,
      1992,
      1993,
      1994,
      1995,
      1996,
      1997,
      1998,
      1999,
      2000,
      2001,
      2002,
      2003,
      2004,
      2005,
      2006,
    ],
  },
  title: {
    text: 'Test Chart',
    align: 'left',
  },
};
const series = [
  {
    name: 'series-1',
    data: [30, 40, 45, 50, 49, 60, 70, 91, 30, 40, 45, 50, 49, 60, 70, 91],
  },
];

and render it with:

return (
      <Chart
        options={options}
        type="area"
        series={series}
        width={500}
        height={320}
      />
    );

But several Options don't work (eg. zoom).
Are all Options listed (https://apexcharts.com/docs/options/) available or just a few?

Greetings

Apexcharts causes gatsby builds to fail

Hi guys! First of all, thank you for the amazing library. I've only been using it for a few hours but I already love it.

So react-apexcharts works amazingly on a gatsby dev server, but when I try to build to a static page for deployment (npm run build / gatsby build), I get the below:

Any idea what might be causing this? Is it an issue with SSR possibly? Removing react-apexcharts and apexcharts fixes the issue.

success Building production JavaScript and CSS bundles — 17.788 s

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  19048 |     });
  19049 |   } else if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object') {
> 19050 |     module.exports = root.document ? factory(root, root.document) : function (w) {
        | ^
  19051 |       return factory(w, w.document);
  19052 |     };
  19053 |   } else {


  WebpackError: TypeError: Cannot read property 'document' of u  ndefined
  
  - apexcharts.esm.js:19050 
    [lib]/[apexcharts]/dist/apexcharts.esm.js:19050:1
  
  - apexcharts.esm.js:19056 Module.<anonymous>
    [lib]/[apexcharts]/dist/apexcharts.esm.js:19056:2
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - react-apexcharts.min.js:1 Object../node_modules/react-apexc    harts/dist/react-apexcharts.min.js
    [lib]/[react-apexcharts]/dist/react-apexcharts.min.js:1:722  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - sync-requires.js:9 Object../.cache/sync-requires.js
    lib/.cache/sync-requires.js:9:56
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - static-entry.js:9 Module../.cache/static-entry.js
    lib/.cache/static-entry.js:9:22
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - bootstrap:83 
    lib/webpack/bootstrap:83:1
  
  

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1

Prevent Labels from being Hidden

Hi there,

How can I prevent labels from being hidden when using datetime and grid.padding.left: 0 & grid.padding.right: 0?

Thanks,
Andres

xaxis only show years start and end

Is empty

How to call dataURI?

Hi,

I’m having some trouble to call dataURI. I did assign an ID, but ApexCharts.exec('chartID', 'dataURI') just returns undefined.

Thanks

Chart goes out of the parent div

I'm working on an admin dashboard where I'm using react-apexcharts. I integrated the chart and everything works fine. But whenever the application mounts the first time or reloads, the charts behave strangely. They go (overflow) out of the parent div. I tried with some other charts but they worked fine.
I'm using:
apexcharts: 2.2.2,
react-apexcharts: 1.3.0
react: 16.7.0
OS:
ubuntu 18.04.2

Updating the Heatmap with new labels causes an error log

Updating the Heatmap with new labels causes an error log to be displayed as the labels are different from the ones the component used before.

Explanation:

I did create a component which does receive the renderData as a prop and then that data is passed over to the component but, when changing the data sent to the Heatmap, this "TypeError: Cannot read property 'color' of undefined" is displayed on the console.

This has happened to me in the past with other libraries such as "react-chartjs" but, has been solved by passing a "redraw" prop into their main Chart's component. However, I'm not able to find a workaround for this using your charts.

Can you please help me and in case there is an existing workaround already, can you please do let me know what that workaround is?

Thank you!

Animate grid and axis on series change

While using the "Line Chart", when I change my series the grid and axis just "jump" into place. Instead of smoothly updating, like the line does.

xaxis tickAmount auto adjustment

Hi there!

Is there any way to make the xaxis' tickAmount adjust itself to the series data length (minus 1 for the ticks to be aligned with the labels) in case there is only one serie or two series with the same length present on the Spline Area Charts options object?

I did try leaving it on undefined but, it didn't worked as the ticks remained on different coordinates in relation to the x-axis while making the xaxis.type = "categories" and sending the chart two series with the same length (without them having to necessarily be "datetime" objects).

I did find a workaround by calculating the xaxis.tickAmount as array.length - 1 and leaving the padding on 0 for the chart to begin and end it's path on the elements xaxis limits but, I would like to know if there is a cleaner way to do this rather than calculating the ticks with a formula.

Thank you!

Create React App - tests fails

Issue happens because react-apexcharts is not pre-compiled.

Steps to reproduce:

npx create-react-app crash-test

cd crash-test

npm install react-apexcharts

App.js

import logo from './logo.svg';
import './App.css';
import Chart from 'react-apexcharts'

const p = {
  options: {
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        shadeIntensity: 1,
        type: 'horizontal',
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100, 100, 100],
      },
    },
    stroke: {
      width: 7,
      curve: 'smooth',
    },
    xaxis: {
      type: 'datetime',
      categories: [
        '1/11/2000',
        '2/11/2000',
        '3/11/2000',
        '4/11/2000',
        '5/11/2000',
      ],
    },
  },
  series: [
    {
      name: 'Likes',
      data: [4, 3, 10, 9, 29],
    },
  ],
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Chart {...p}/>
      </div>
    );
  }
}

export default App;

npm run test

npm run build

Testing doesn't give any usefull error, but trying to build outputs:

Failed to minify the code from this file:

 	./node_modules/react-apexcharts/dist/react-apexcharts.js:5

Read more here: http://bit.ly/2tRViJ9

Launch zoom event using React

Hi guys! First of all thanks for such great library! I appreciate all the work that you put in here! :D

I have a question, I'm using the library with React, so far, everything is ok but I would like to programatically launch a zoom event and I don't know how to do it.

<Chart id="chartID" options={options} series={series} type="area" width="100%" height="350px" />

This is my chart within the render() method. I've read that I can use exec for that purpose, is it correct? Have you ever tried it? Thanks!

Changing xaxis options makes no effect

Here I reproduced the issue: https://codesandbox.io/s/2511k0z0p
In my own chart I'm trying to implement those buttons to change time range. Options are stored in state and are passed to Chart. I change those options in state, but in makes no effect.

Syncing charts with diferent options

Hello, I work with apexcharts and react-apexcharts and I have a little issue:
When I create a group of charts to sync them, some options can not be different between the charts. for example, the fill type, the title, or the toolbar showing. Too bad !
Is it a bug or is it voluntary?
There is a workaround?

(my first time on github issues so if i forgot something, please tell me what)
Thank you

Version Update. MultiAxis Chart not rendering Properly

I updated my apex charts library recently and here's what I get when using multi-axis chart. For some reason it doesn't render properly sometimes. Here are the two images one with the old version apexcharts(2.2.2) and the other with newer version I updated to apexcharts(3.2.1)

Old Version

New Version

The graph has exactly the same data in both images. The only thing I changed was the apexcharts version.
Thanks

horizontal bars show 0 values

My options and series:

   let options1 = {
        chart: {
            height: 350,
            type: 'bar',
            stacked: true,
            stackType: '100%'
        },
        plotOptions: {
            bar: {
                horizontal: true
            },
        },
        stroke: {
            width: 1,
            colors: ['#fff']
        },
        title: {
            text: 'THis is Graph '
        },
        xaxis: {
            categories: this.state.platforms
        },
        tooltip: {
                y: {
                    formatter: function(val) {
                    return val
                }
            }
        },
        fill: {
            opacity: 1
        },
        legend: {
            position: 'top',
            horizontalAlign: 'left',
            offsetX: 40
        }
    }

    let series1 = [{
        name: 'Bar1',
        data: this.state.mData
    },{
        name: 'Bar2',
        data: this.state.aData
    },{
        name: 'Bar3',
        data: this.state.rData
    }]

• If there are 3 possible bars, and one of them has a value of zero, then that bar and 0 value should not be displayed.
• From what I've searched, the issue is fixed on apex charts, but not react apex charts.
• These are my current react and apex chart versions:
  "apexcharts": "^2.6.0",
  "react": "^16.3.2",
  "react-apexcharts": "^1.2.1",

If this won't be fixed, how could I go about fixing this myself, can I add conditionals to the bar options based on the current "value" of the bar?

Screenshot of the issue (see the end of some of the blue bars, or the very last green bar):

Thanks :)

Charts with useState of React Hook, does not works

Hi,
i'm trying use Apexcharts with useState of React Hook, but the data series does not showing up.
the chart is rendered without bars and without yaxis labels

this is the component:

import React, { useState } from 'react';

import Apexchart from 'react-apexcharts';

export default function BarChart (props) {
    // initial options
    const initOptions = {
        legend: {
            show: false
        },
        plotOptions: {
            bar: {
                horizontal: true
                colors: {
                    backgroundBarColors: [props.theme],
                    backgroundBarOpacity: 0.2,
                },
                dataLabels: {
                    position: 'top',
                },
                barHeight: '55px',
                columnWidth: 100
            },
            yaxis: {
            }
        },
        stroke: {
            show: true,
            curve: 'smooth',
            lineCap: 'round',
        },
        theme: {
            monochrome: {
                enabled: true,
                color: props.theme,
            },
        },
        grid: {
            yaxis: {
                lines: {
                    show: false,
                }
            },
        },
        xaxis: {
            axisTicks: {
                show: false
            },
            axisBorder: {
                show: false
            },
            labels: {
                show: false,
            },
        },
        yaxis: {
            labels: {
                style: {
                    color: '#3a759c',
                    fontSize: '11px'
                },
                maxWidth: 73,
                formatter: value => (value.length > 13 ? `${value.substring(0, 13)}.` : value),
                offsetX: 7
            },
        },
        dataLabels: {
            style: {
                colors: [props.theme],
                fontSize: '13px',
            },
            dropShadow: {
                enabled: true,
                top: 0,
                left: 0,
                blur: 2,
                opacity: 1
            },
            offsetY: 1,
            offsetX: 18,
        },
        tooltip: {
            theme: 'dark'
        },
    }
    const options = initOptions;
    // getting data from props
    const allData = props.data.map( data => ({
        x: data[0],
        y: data[1]
    }) )
    // series
    const [series, setSeries] = useState([{
        name: 'Agendamentos',
        data: allData.slice(0, 4)
    }])

    return (
        <div style={{width: '100%', paddingLeft: '10px'}}>
            <Apexchart 
                options={options}
                series={series}
                type="bar"
                height={props.height ? props.height : "auto"}
            />
        </div>
    );
}

instantiating the component:
<BarChart theme="#D870EB" data={dataList} />

Explanation

• What is the behavior you expect?
• What is happening instead? the chart is rendered without bars and without yaxis labels
• What error message are you getting? no erro

Multiple TypeErrors when deselecting all legend options on a Line Chart

Deselecting all legend options results in:

Trying to re-select the deselected options:

sandbox - https://codesandbox.io/s/6v71p3y9l3

fill gradient not working?

I'm trying to reproduce this https://apexcharts.com/samples/vanilla-js/line/zoomable-timeseries.html which has a fill gradient. I can't get it to work though. The gradient appears to be on the line colour, not the area under the line.

using:

"apexcharts": "^3.1.0",
"react-apexcharts": "^1.2.1",

xaxis categories don't update with line chart (but do so with bar chart)

I'm fetching data from an api that returns data for both the series and the x-axis categories properties. The api call and state updating is done within componentDidMount. This all works fine when the chart type is a bar chart, but the xaxis state won't update when the chart type is changed to a line chart. Any help you could provide would be greatly appreciated. Thanks!

`
import React, { Component } from 'react';
import Chart from 'react-apexcharts';

class WAUchart extends Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
id: "WAU"
},
xaxis: {
type: "category",
categories: []
},
title: {
text: "WAU",
align: "center",
style: {
fontSize: "20px",
color: "black"
}
},
labels: []
},
series: [
{
name: "WAU",
data: []
}
],
};
};

fetchData() {
    fetch('http://127.0.0.1:5000/wau?start_time="2018-05-01"')
        .then(response => response.json())
        .then(dat => {
            const newSeries = [];
            const newXaxis = JSON.parse(dat.xaxis);
            newSeries.push({ data: JSON.parse(dat.series), name: this.state.series[0].name });
            this.setState({
                series: newSeries,
                options: { ...this.state.options, labels: newXaxis, xaxis: { ...this.state.options.xaxis, categories: newXaxis } }
            });
            console.log(this.state.options);
        })
};

componentDidMount() {
    this.fetchData()
};

render() {
    return (
        <Chart
            options={this.state.options}
            series={this.state.series}
            type="line"
            height="450"
            width="100%"
        />
    )
}

}

export default WAUchart;
'

Add className property to Chart component

【Feature】Can we support react native?

Display markers even if there is only one data set for each serie.

Hi there @junedchhipa, hope you are doing amazing!

How can I achieve this:

If there is only one entry on each of the series' data array?

Here is a CodeSandbox which can be used as a reference: https://codesandbox.io/s/oqn6y4yj99.

Thank you,
Andres

TypeScript typings

Hi,

I am trying to use this package with a new create-react-app --typescript project, however there's no typings for this package on npm so I've tried to make my own.

So far in react-apexcharts.d.ts I have:

/// <reference types="react" />

declare module "react-apexcharts" {
  class Chart extends React.Component<any> {}

  export default Chart;
}

But this fails pretty much instantly at:

Function.checkComboSeries
node_modules/babel-loader/lib/index.js??ref--6-oneOf-2!/Users/me/code/running/node_modules/apexcharts/dist/apexcharts.esm.js:3972
  3969 | var comboChartsHasBars = false; // if user specified a type in series too, turn on comboCharts flag
  3970 | 
  3971 | if (series.length && typeof series[0].type !== 'undefined') {
> 3972 |   comboCharts = true;
       | ^  3973 |   series.forEach(function (s) {
  3974 |     if (s.type === 'bar' || s.type === 'column') {
  3975 |       comboChartsHasBars = true;

Not 100% sure where to start debugging this, does anyone have any ideas?

Prevent charts from auto-generating labels when setting the xaxis.type on "datetime"

Hi there @junedchhipa,

How can I prevent this:

From happening if there are few data entries while the xaxis.type attribute is set on "datetime"?

On this example, only 2018-10-29T07:00:00.000Z and 2018-10-29T08:00:00.000Z are present as datapoints.

Thank you,
Andres