react-chartjs-2
- Version 5.3.0
- Published
- 55.9 kB
- No dependencies
- MIT license
Install
npm i react-chartjs-2
yarn add react-chartjs-2
pnpm add react-chartjs-2
Overview
React components for Chart.js
Index
Variables
variable Bar
const Bar: TypedChartComponent<'bar'>;
variable Bubble
const Bubble: TypedChartComponent<'bubble'>;
variable Chart
const Chart: BaseChartComponent;
variable Doughnut
const Doughnut: TypedChartComponent<'doughnut'>;
variable Line
const Line: TypedChartComponent<'line'>;
variable Pie
const Pie: TypedChartComponent<'pie'>;
variable PolarArea
const PolarArea: TypedChartComponent<'polarArea'>;
variable Radar
const Radar: TypedChartComponent<'radar'>;
variable Scatter
const Scatter: TypedChartComponent<'scatter'>;
Functions
function getDatasetAtEvent
getDatasetAtEvent: ( chart: Chart, event: MouseEvent<HTMLCanvasElement>) => import('chart.js').InteractionItem[];
Get dataset from mouse click event
Parameter chart
Chart.js instance
Parameter event
Mouse click event
Returns
Dataset
function getElementAtEvent
getElementAtEvent: ( chart: Chart, event: MouseEvent<HTMLCanvasElement>) => import('chart.js').InteractionItem[];
Get single dataset element from mouse click event
Parameter chart
Chart.js instance
Parameter event
Mouse click event
Returns
Dataset
function getElementsAtEvent
getElementsAtEvent: ( chart: Chart, event: MouseEvent<HTMLCanvasElement>) => import('chart.js').InteractionItem[];
Get all dataset elements from mouse click event
Parameter chart
Chart.js instance
Parameter event
Mouse click event
Returns
Dataset
Interfaces
interface ChartProps
interface ChartProps< TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> extends CanvasHTMLAttributes<HTMLCanvasElement> {}
property data
data: ChartData<TType, TData, TLabel>;
The data object that is passed into the Chart.js chart
See Also
https://www.chartjs.org/docs/latest/getting-started/
property datasetIdKey
datasetIdKey?: string;
Key name to identificate dataset 'label'
property fallbackContent
fallbackContent?: ReactNode;
A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions
See Also
https://www.chartjs.org/docs/latest/general/accessibility.html null Replace with
children
prop.
property options
options?: ChartOptions<TType>;
The options object that is passed into the Chart.js chart
See Also
https://www.chartjs.org/docs/latest/general/options.html {}
property plugins
plugins?: Plugin<TType>[];
The plugins array that is passed into the Chart.js chart
See Also
https://www.chartjs.org/docs/latest/developers/plugins.html []
property redraw
redraw?: boolean;
Teardown and redraw chart on every update false
property type
type: TType;
Chart.js chart type
property updateMode
updateMode?: UpdateMode;
A mode string to indicate transition configuration should be used.
See Also
https://www.chartjs.org/docs/latest/developers/api.html#update-mode
Package Files (5)
Dependencies (0)
No dependencies.
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-chartjs-2
.
- Markdown[](https://www.jsdocs.io/package/react-chartjs-2)
- HTML<a href="https://www.jsdocs.io/package/react-chartjs-2"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 2916 ms. - Missing or incorrect documentation? Open an issue for this package.