xaxis: { labels: { datetimeFormatter: { year: 'yyyy' , month: 'MMM \'yy' , day: 'dd MMM' , hour: 'HH:mm' } } } Based on the difference between minX (leftmost datetime) and maxX (rightmost datetime), xaxis labels are generated. In the x-axis we have the time (hh:mm). Each value indicates one bar per series. See the Pen Single values. This gets done for each of the three buttons, noting that by default FGM is what the chart initialises as. React Chart Demos > Line Charts > Zoomable Timeseries. No-code back-end for any app under 10 minutes. The third argument, in addition to the config object, also includes additional information like which dataPointIndex was hovered of particular series. In the y-axis we have the count. ApexCharts methods is the process to modify a chart or graph after it has been rendered. Angular Chart Demos > Line Charts > Zoomable Timeseries. To zoom the time-series programmatically, the recommended way is to call the updateOptions () method with the specified xaxis.min and xaxis.max. chart: { events: { dataPointSelection: (event, chartContext, config) => { console.log (chartContext, config); } } } Here is an updated codepen of your example. ApexCharts allow the construction of bar charts with 100% stacking, a combination of negative and positive values and even grouped bar charts. new Date(1797, 2, 4).getTime(), new Date(1801, 2, 4).getTime() ``` how can I change the value to display time? You just have to click the sandwich menu icon on the top right corner to discover it. The easiest way is to bind the event directly in the component. How to use apexcharts as a visualization tool? React Zoomable TimeSeries Example - ApexCharts.js. but the example(vue) only shown how to display the date like. Contribute to apexcharts/apexcharts.js development by creating an account on GitHub. simmmpleweb. We use cookies to ensure that we give you the best experience on our website. '