Scribd
Upload
139 views2 pages

React Bar Chart Setup Guide

This document defines a React component that renders a bar chart using Chart.js and react-chartjs-2. It imports the necessary Chart.js and react-chartjs-2 modules. It defines options for customizing the chart appearance including hiding axes, positioning the legend, and styling points. It also defines sample data labels and datasets to plot on the chart with customized colors and thickness. The component returns a Bar chart rendered with the defined data and options.

Uploaded by

Everson Lixo Eletrônico
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
139 views2 pages

React Bar Chart Setup Guide

This document defines a React component that renders a bar chart using Chart.js and react-chartjs-2. It imports the necessary Chart.js and react-chartjs-2 modules. It defines options for customizing the chart appearance including hiding axes, positioning the legend, and styling points. It also defines sample data labels and datasets to plot on the chart with customized colors and thickness. The component returns a Bar chart rendered with the defined data and options.

Uploaded by

Everson Lixo Eletrônico
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

chart js 2

import React from 'react';


import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);

export const options = {


responsive: true,
plugins: {
legend: {
position: 'top', // lable position left/right/top/bottom
labels: {
boxWidth: 0, // lable box size
}
},
},
elements: {
point: {
radius: 1
}
},
scales: {
x: {
display: false, // show/ hide x-axis
grid: {
display: false // show/hide grid line in x-axis
},
},
y: {
display: false, // same as x-axis
grid: {
display: false
}
}
}
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

export const data = {


labels,
datasets: [
{
label: 'datasets', // label text
data: [100, 300, 500, 700],
backgroundColor: '#7b62ff', // bar / column color
barThickness: 6, // <<<<<<<<<<<< bar / column size
},
],
};

export default function ResumesGraph() {


return (
<div>
<Bar
data={data}
options={options}
width={'500px'}
height={'180px'}
/>
</div>
);
}

You might also like