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.