Create and Download a Column Bar Chart Using React ApexCharts with Bootstrap

How to create and download a column bar chart using React ApexCharts with Bootstrap, you'll first need to install the necessary packages and then implement the chart component along with the download functionality. Here's a step-by-step guide: 1. Install Dependencies: Make sure you have React, ApexCharts, and Bootstrap installed in your project.

npm install react react-dom apexcharts react-apexcharts bootstrap

2. Create Chart Component: Create a new component for your column bar chart. This component will render the chart using ApexCharts.

// ColumnChart.js
import React from 'react';
import Chart from 'react-apexcharts';
const ColumnChart = ({ data }) => {
const options = {
chart: {
type: 'bar',
height: 350,
},
plotOptions: {
bar: {
horizontal: false,
},
},
xaxis: {
categories: data.map(item => item.label),
},
};
const series = [{
name: 'Values',
data: data.map(item => item.value),
}];

return (
<div className="card">
<div className="card-body">
<Chart options={options} series={series} type="bar" height={350} />
</div>
</div>
);
};

export default ColumnChart;

3. Implement Download Button: Add a button to your component to trigger the download action. You'll also need a function to handle the download action.

// ColumnChart.js (continued)
import React from 'react';
import Chart from 'react-apexcharts';
const ColumnChart = ({ data }) => {
const options = {
chart: {
type: 'bar',
height: 350,
},
plotOptions: {
bar: {
horizontal: false,
},
},
xaxis: {
categories: data.map(item => item.label),
},
};
const series = [{
name: 'Values',
data: data.map(item => item.value),
}];

const handleDownload = () => {
const chart = document.getElementById('chart');
chart.getChart().then(chart => {
chart.downloadCSV();
});
};
return (
<div className="card">
<div className="card-body">
<Chart id="chart" options={options} series={series} type="bar" height={350} />
</div>
<div className="card-footer text-center">
<button className="btn btn-primary" onClick={handleDownload}>Download</button>
</div>
</div>
);
};

export default ColumnChart;

4. Usage: Use the `ColumnChart` component in your application and pass the data as props.

// App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import ColumnChart from './ColumnChart';
const App = () => {
const data = [
{ label: 'A', value: 10 },
{ label: 'B', value: 20 },
{ label: 'C', value: 30 },
{ label: 'D', value: 40 },
];

return (
<div className="container mt-4">
<h1 className="text-center mb-4">Column Bar Chart with Download Button</h1>
<ColumnChart data={data} />
</div>
);
};

export default App;

With these steps, you have a React component that renders a column bar chart using ApexCharts with a Bootstrap-styled download button. When the button is clicked, the chart data is downloaded as a CSV file. Adjust the chart data and styling according to your requirements.