Socket
Socket
Sign inDemoInstall

react-chartjs-2

Package Overview
Dependencies
Maintainers
5
Versions
84
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-chartjs-2 - npm Package Compare versions

Comparing version 3.0.5 to 3.1.0

3

dist/chart.d.ts
import React from 'react';
import Chart from 'chart.js/auto';
import { Props } from './types';
declare const ChartComponent: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
declare const ChartComponent: React.ForwardRefExoticComponent<Props & React.RefAttributes<Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>>;
export default ChartComponent;

22

dist/index.d.ts
import React from 'react';
import Chart from 'chart.js/auto';
import { defaults } from 'chart.js';
import { Props } from './types';
import ChartComponent from './chart';
import * as chartjs from 'chart.js';
export declare const Line: React.ForwardRefExoticComponent<Pick<Props, "id" | "className" | "height" | "width" | "redraw" | "data" | "options" | "fallbackContent" | "plugins" | "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
export declare const Bar: React.ForwardRefExoticComponent<Pick<Props, "id" | "className" | "height" | "width" | "redraw" | "data" | "options" | "fallbackContent" | "plugins" | "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
export declare const Radar: React.ForwardRefExoticComponent<Pick<Props, "id" | "className" | "height" | "width" | "redraw" | "data" | "options" | "fallbackContent" | "plugins" | "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
export declare const Doughnut: React.ForwardRefExoticComponent<Pick<Props, "id" | "className" | "height" | "width" | "redraw" | "data" | "options" | "fallbackContent" | "plugins" | "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
export declare const PolarArea: React.ForwardRefExoticComponent<Pick<Props, "id" | "className" | "height" | "width" | "redraw" | "data" | "options" | "fallbackContent" | "plugins" | "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
export declare const Bubble: React.ForwardRefExoticComponent<Pick<Props, "id" | "className" | "height" | "width" | "redraw" | "data" | "options" | "fallbackContent" | "plugins" | "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
export declare const Pie: React.ForwardRefExoticComponent<Pick<Props, "id" | "className" | "height" | "width" | "redraw" | "data" | "options" | "fallbackContent" | "plugins" | "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
export declare const Scatter: React.ForwardRefExoticComponent<Pick<Props, "id" | "className" | "height" | "width" | "redraw" | "data" | "options" | "fallbackContent" | "plugins" | "getDatasetAtEvent" | "getElementAtEvent" | "getElementsAtEvent" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
export declare const defaults: chartjs.Defaults;
export declare const Chart: typeof chartjs.Chart;
export declare const Line: React.ForwardRefExoticComponent<Omit<Props, "type"> & React.RefAttributes<Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>>;
export declare const Bar: React.ForwardRefExoticComponent<Omit<Props, "type"> & React.RefAttributes<Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>>;
export declare const Radar: React.ForwardRefExoticComponent<Omit<Props, "type"> & React.RefAttributes<Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>>;
export declare const Doughnut: React.ForwardRefExoticComponent<Omit<Props, "type"> & React.RefAttributes<Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>>;
export declare const PolarArea: React.ForwardRefExoticComponent<Omit<Props, "type"> & React.RefAttributes<Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>>;
export declare const Bubble: React.ForwardRefExoticComponent<Omit<Props, "type"> & React.RefAttributes<Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>>;
export declare const Pie: React.ForwardRefExoticComponent<Omit<Props, "type"> & React.RefAttributes<Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>>;
export declare const Scatter: React.ForwardRefExoticComponent<Omit<Props, "type"> & React.RefAttributes<Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").ScatterDataPoint | import("chart.js").BubbleDataPoint | null)[], unknown> | undefined>>;
export { Chart, defaults };
export default ChartComponent;

476

dist/index.js

@@ -1,238 +0,301 @@

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var React__default = _interopDefault(React);
var Chart$1 = _interopDefault(require('chart.js/auto'));
var merge = _interopDefault(require('lodash/merge'));
var assign = _interopDefault(require('lodash/assign'));
var find = _interopDefault(require('lodash/find'));
var chartjs = require('chart.js');
var Chart = require('chart.js/auto');
var chart_js = require('chart.js');
var merge = require('lodash/merge');
var assign = require('lodash/assign');
var find = require('lodash/find');
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Chart__default = /*#__PURE__*/_interopDefaultLegacy(Chart);
var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
var assign__default = /*#__PURE__*/_interopDefaultLegacy(assign);
var find__default = /*#__PURE__*/_interopDefaultLegacy(find);
return target;
};
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
return _extends.apply(this, arguments);
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
return target;
function _objectSpread(target) {
var _arguments = arguments, _loop = function(i) {
var source = _arguments[i] != null ? _arguments[i] : {
};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_defineProperty(target, key, source[key]);
});
};
for(var i = 1; i < arguments.length; i++)_loop(i);
return target;
}
var ChartComponent = React.forwardRef(function (props, ref) {
var id = props.id,
className = props.className,
_props$height = props.height,
height = _props$height === void 0 ? 150 : _props$height,
_props$width = props.width,
width = _props$width === void 0 ? 300 : _props$width,
_props$redraw = props.redraw,
redraw = _props$redraw === void 0 ? false : _props$redraw,
type = props.type,
data = props.data,
_props$options = props.options,
options = _props$options === void 0 ? {} : _props$options,
_props$plugins = props.plugins,
plugins = _props$plugins === void 0 ? [] : _props$plugins,
getDatasetAtEvent = props.getDatasetAtEvent,
getElementAtEvent = props.getElementAtEvent,
getElementsAtEvent = props.getElementsAtEvent,
fallbackContent = props.fallbackContent,
rest = _objectWithoutPropertiesLoose(props, ["id", "className", "height", "width", "redraw", "type", "data", "options", "plugins", "getDatasetAtEvent", "getElementAtEvent", "getElementsAtEvent", "fallbackContent"]);
var canvas = React.useRef(null);
var computedData = React.useMemo(function () {
if (typeof data === 'function') {
return canvas.current ? data(canvas.current) : {};
} else return merge({}, data);
}, [data, canvas.current]);
var _useState = React.useState(),
chart = _useState[0],
setChart = _useState[1];
React.useImperativeHandle(ref, function () {
return chart;
}, [chart]);
var renderChart = function renderChart() {
if (!canvas.current) return;
setChart(new Chart$1(canvas.current, {
type: type,
data: computedData,
options: options,
plugins: plugins
}));
};
var onClick = function onClick(e) {
if (!chart) return;
getDatasetAtEvent && getDatasetAtEvent(chart.getElementsAtEventForMode(e, 'dataset', {
intersect: true
}, false), e);
getElementAtEvent && getElementAtEvent(chart.getElementsAtEventForMode(e, 'nearest', {
intersect: true
}, false), e);
getElementsAtEvent && getElementsAtEvent(chart.getElementsAtEventForMode(e, 'index', {
intersect: true
}, false), e);
};
var updateChart = function updateChart() {
if (!chart) return;
if (options) {
chart.options = _extends({}, options);
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {
};
var target = {
};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
if (!chart.config.data) {
chart.config.data = computedData;
chart.update();
return;
function _objectWithoutProperties(source, excluded) {
if (source == null) return {
};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
var _computedData$dataset = computedData.datasets,
newDataSets = _computedData$dataset === void 0 ? [] : _computedData$dataset,
newChartData = _objectWithoutPropertiesLoose(computedData, ["datasets"]);
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest();
}
var _chart$config$data$da = chart.config.data.datasets,
currentDataSets = _chart$config$data$da === void 0 ? [] : _chart$config$data$da;
assign(chart.config.data, newChartData);
chart.config.data.datasets = newDataSets.map(function (newDataSet) {
var currentDataSet = find(currentDataSets, function (d) {
return d.label === newDataSet.label && d.type === newDataSet.type;
});
if (!currentDataSet || !newDataSet.data) return _extends({}, newDataSet);
if (!currentDataSet.data) {
currentDataSet.data = [];
} else {
currentDataSet.data.length = newDataSet.data.length;
}
assign(currentDataSet.data, newDataSet.data);
assign(currentDataSet, _extends({}, newDataSet, {
data: currentDataSet.data
}));
return currentDataSet;
});
chart.update();
};
var destroyChart = function destroyChart() {
if (chart) chart.destroy();
};
React.useEffect(function () {
renderChart();
return function () {
return destroyChart();
var ChartComponent = /*#__PURE__*/ React.forwardRef(function(props, ref) {
var id = props.id, className = props.className, _height = props.height, height = _height === void 0 ? 150 : _height, _width = props.width, width = _width === void 0 ? 300 : _width, _redraw = props.redraw, redraw = _redraw === void 0 ? false : _redraw, type = props.type, data = props.data, _options = props.options, options = _options === void 0 ? {
} : _options, _plugins = props.plugins, plugins = _plugins === void 0 ? [] : _plugins, getDatasetAtEvent = props.getDatasetAtEvent, getElementAtEvent = props.getElementAtEvent, getElementsAtEvent = props.getElementsAtEvent, fallbackContent = props.fallbackContent, rest = _objectWithoutProperties(props, ["id", "className", "height", "width", "redraw", "type", "data", "options", "plugins", "getDatasetAtEvent", "getElementAtEvent", "getElementsAtEvent", "fallbackContent"]);
var canvas = React.useRef(null);
var computedData = React.useMemo(function() {
if (typeof data === 'function') {
return canvas.current ? data(canvas.current) : {
datasets: []
};
} else return merge__default["default"]({
}, data);
}, [
data,
canvas.current
]);
var ref1 = _slicedToArray(React.useState()), chart = ref1[0], setChart = ref1[1];
React.useImperativeHandle(ref, function() {
return chart;
}, [
chart,
]);
var renderChart = function() {
if (!canvas.current) return;
setChart(new Chart__default["default"](canvas.current, {
type: type,
data: computedData,
options: options,
plugins: plugins
}));
};
}, []);
React.useEffect(function () {
if (redraw) {
destroyChart();
setTimeout(function () {
var onClick = function(e) {
if (!chart) return;
getDatasetAtEvent && getDatasetAtEvent(chart.getElementsAtEventForMode(e, 'dataset', {
intersect: true
}, false), e);
getElementAtEvent && getElementAtEvent(chart.getElementsAtEventForMode(e, 'nearest', {
intersect: true
}, false), e);
getElementsAtEvent && getElementsAtEvent(chart.getElementsAtEventForMode(e, 'index', {
intersect: true
}, false), e);
};
var updateChart = function() {
if (!chart) return;
if (options) {
chart.options = _objectSpread({
}, options);
}
if (!chart.config.data) {
chart.config.data = computedData;
chart.update();
return;
}
var tmp = computedData.datasets, newDataSets = tmp === void 0 ? [] : tmp, newChartData = _objectWithoutProperties(computedData, [
"datasets"
]);
var _data = chart.config.data, tmp1 = _data.datasets, currentDataSets = tmp1 === void 0 ? [] : tmp1;
// copy values
assign__default["default"](chart.config.data, newChartData);
chart.config.data.datasets = newDataSets.map(function(newDataSet) {
// given the new set, find it's current match
var currentDataSet = find__default["default"](currentDataSets, function(d) {
return d.label === newDataSet.label && d.type === newDataSet.type;
});
// There is no original to update, so simply add new one
if (!currentDataSet || !newDataSet.data) return _objectSpread({
}, newDataSet);
if (!currentDataSet.data) {
currentDataSet.data = [];
} else {
currentDataSet.data.length = newDataSet.data.length;
}
// copy in values
assign__default["default"](currentDataSet.data, newDataSet.data);
// apply dataset changes, but keep copied data
assign__default["default"](currentDataSet, _objectSpread({
}, newDataSet, {
data: currentDataSet.data
}));
return currentDataSet;
});
chart.update();
};
var destroyChart = function() {
if (chart) chart.destroy();
};
React.useEffect(function() {
renderChart();
}, 0);
} else {
updateChart();
}
}, [props, computedData]);
return React__default.createElement("canvas", Object.assign({}, rest, {
height: height,
width: width,
ref: canvas,
id: id,
className: className,
onClick: onClick,
"data-testid": 'canvas',
role: 'img'
}), fallbackContent);
return function() {
return destroyChart();
};
}, []);
React.useEffect(function() {
if (redraw) {
destroyChart();
setTimeout(function() {
renderChart();
}, 0);
} else {
updateChart();
}
}, [
props,
computedData
]);
return(/*#__PURE__*/ React__default["default"].createElement("canvas", Object.assign({
}, rest, {
height: height,
width: width,
ref: canvas,
id: id,
className: className,
onClick: onClick,
"data-testid": "canvas",
role: "img"
}), fallbackContent));
});
var Line = React.forwardRef(function (props, ref) {
return React__default.createElement(ChartComponent, Object.assign({}, props, {
type: 'line',
ref: ref,
options: props.options || {}
}));
var Line = /*#__PURE__*/ React.forwardRef(function(props, ref) {
return React__default["default"].createElement(ChartComponent, Object.assign({
}, props, {
type: "line",
ref: ref,
options: props.options || {
}
}));
});
var Bar = React.forwardRef(function (props, ref) {
return React__default.createElement(ChartComponent, Object.assign({}, props, {
type: 'bar',
ref: ref,
options: props.options || {}
}));
var Bar = /*#__PURE__*/ React.forwardRef(function(props, ref) {
return React__default["default"].createElement(ChartComponent, Object.assign({
}, props, {
type: "bar",
ref: ref,
options: props.options || {
}
}));
});
var Radar = React.forwardRef(function (props, ref) {
return React__default.createElement(ChartComponent, Object.assign({}, props, {
type: 'radar',
ref: ref,
options: props.options || {}
}));
var Radar = /*#__PURE__*/ React.forwardRef(function(props, ref) {
return React__default["default"].createElement(ChartComponent, Object.assign({
}, props, {
type: "radar",
ref: ref,
options: props.options || {
}
}));
});
var Doughnut = React.forwardRef(function (props, ref) {
return React__default.createElement(ChartComponent, Object.assign({}, props, {
type: 'doughnut',
ref: ref,
options: props.options || {}
}));
var Doughnut = /*#__PURE__*/ React.forwardRef(function(props, ref) {
return React__default["default"].createElement(ChartComponent, Object.assign({
}, props, {
type: "doughnut",
ref: ref,
options: props.options || {
}
}));
});
var PolarArea = React.forwardRef(function (props, ref) {
return React__default.createElement(ChartComponent, Object.assign({}, props, {
type: 'polarArea',
ref: ref,
options: props.options || {}
}));
var PolarArea = /*#__PURE__*/ React.forwardRef(function(props, ref) {
return React__default["default"].createElement(ChartComponent, Object.assign({
}, props, {
type: "polarArea",
ref: ref,
options: props.options || {
}
}));
});
var Bubble = React.forwardRef(function (props, ref) {
return React__default.createElement(ChartComponent, Object.assign({}, props, {
type: 'bubble',
ref: ref,
options: props.options || {}
}));
var Bubble = /*#__PURE__*/ React.forwardRef(function(props, ref) {
return React__default["default"].createElement(ChartComponent, Object.assign({
}, props, {
type: "bubble",
ref: ref,
options: props.options || {
}
}));
});
var Pie = React.forwardRef(function (props, ref) {
return React__default.createElement(ChartComponent, Object.assign({}, props, {
type: 'pie',
ref: ref,
options: props.options || {}
}));
var Pie = /*#__PURE__*/ React.forwardRef(function(props, ref) {
return React__default["default"].createElement(ChartComponent, Object.assign({
}, props, {
type: "pie",
ref: ref,
options: props.options || {
}
}));
});
var Scatter = React.forwardRef(function (props, ref) {
return React__default.createElement(ChartComponent, Object.assign({}, props, {
type: 'scatter',
ref: ref,
options: props.options || {}
}));
var Scatter = /*#__PURE__*/ React.forwardRef(function(props, ref) {
return React__default["default"].createElement(ChartComponent, Object.assign({
}, props, {
type: "scatter",
ref: ref,
options: props.options || {
}
}));
});
var defaults = chartjs.defaults;
var Chart = chartjs.Chart;
Object.defineProperty(exports, 'Chart', {
enumerable: true,
get: function () { return Chart__default["default"]; }
});
Object.defineProperty(exports, 'defaults', {
enumerable: true,
get: function () { return chart_js.defaults; }
});
exports.Bar = Bar;
exports.Bubble = Bubble;
exports.Chart = Chart;
exports.Doughnut = Doughnut;

@@ -244,4 +307,3 @@ exports.Line = Line;

exports.Scatter = Scatter;
exports.default = ChartComponent;
exports.defaults = defaults;
exports["default"] = ChartComponent;
//# sourceMappingURL=index.js.map

453

dist/index.modern.js
import React, { forwardRef, useRef, useMemo, useState, useImperativeHandle, useEffect } from 'react';
import Chart$1 from 'chart.js/auto';
import Chart from 'chart.js/auto';
export { default as Chart } from 'chart.js/auto';
export { defaults } from 'chart.js';
import merge from 'lodash/merge';
import assign from 'lodash/assign';
import find from 'lodash/find';
import { defaults as defaults$1, Chart as Chart$2 } from 'chart.js';
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _objectSpread(target) {
var _arguments = arguments, _loop = function(i) {
var source = _arguments[i] != null ? _arguments[i] : {
};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_defineProperty(target, key, source[key]);
});
};
for(var i = 1; i < arguments.length; i++)_loop(i);
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
if (source == null) return {
};
var target = {
};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
var ChartComponent = forwardRef(function (props, ref) {
var id = props.id,
className = props.className,
_props$height = props.height,
height = _props$height === void 0 ? 150 : _props$height,
_props$width = props.width,
width = _props$width === void 0 ? 300 : _props$width,
_props$redraw = props.redraw,
redraw = _props$redraw === void 0 ? false : _props$redraw,
type = props.type,
data = props.data,
_props$options = props.options,
options = _props$options === void 0 ? {} : _props$options,
_props$plugins = props.plugins,
plugins = _props$plugins === void 0 ? [] : _props$plugins,
getDatasetAtEvent = props.getDatasetAtEvent,
getElementAtEvent = props.getElementAtEvent,
getElementsAtEvent = props.getElementsAtEvent,
fallbackContent = props.fallbackContent,
rest = _objectWithoutPropertiesLoose(props, ["id", "className", "height", "width", "redraw", "type", "data", "options", "plugins", "getDatasetAtEvent", "getElementAtEvent", "getElementsAtEvent", "fallbackContent"]);
var canvas = useRef(null);
var computedData = useMemo(function () {
if (typeof data === 'function') {
return canvas.current ? data(canvas.current) : {};
} else return merge({}, data);
}, [data, canvas.current]);
var _useState = useState(),
chart = _useState[0],
setChart = _useState[1];
useImperativeHandle(ref, function () {
return chart;
}, [chart]);
var renderChart = function renderChart() {
if (!canvas.current) return;
setChart(new Chart$1(canvas.current, {
type: type,
data: computedData,
options: options,
plugins: plugins
}));
};
var onClick = function onClick(e) {
if (!chart) return;
getDatasetAtEvent && getDatasetAtEvent(chart.getElementsAtEventForMode(e, 'dataset', {
intersect: true
}, false), e);
getElementAtEvent && getElementAtEvent(chart.getElementsAtEventForMode(e, 'nearest', {
intersect: true
}, false), e);
getElementsAtEvent && getElementsAtEvent(chart.getElementsAtEventForMode(e, 'index', {
intersect: true
}, false), e);
};
var updateChart = function updateChart() {
if (!chart) return;
if (options) {
chart.options = _extends({}, options);
function _objectWithoutProperties(source, excluded) {
if (source == null) return {
};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
if (!chart.config.data) {
chart.config.data = computedData;
chart.update();
return;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest();
}
var _computedData$dataset = computedData.datasets,
newDataSets = _computedData$dataset === void 0 ? [] : _computedData$dataset,
newChartData = _objectWithoutPropertiesLoose(computedData, ["datasets"]);
var _chart$config$data$da = chart.config.data.datasets,
currentDataSets = _chart$config$data$da === void 0 ? [] : _chart$config$data$da;
assign(chart.config.data, newChartData);
chart.config.data.datasets = newDataSets.map(function (newDataSet) {
var currentDataSet = find(currentDataSets, function (d) {
return d.label === newDataSet.label && d.type === newDataSet.type;
});
if (!currentDataSet || !newDataSet.data) return _extends({}, newDataSet);
if (!currentDataSet.data) {
currentDataSet.data = [];
} else {
currentDataSet.data.length = newDataSet.data.length;
}
assign(currentDataSet.data, newDataSet.data);
assign(currentDataSet, _extends({}, newDataSet, {
data: currentDataSet.data
}));
return currentDataSet;
});
chart.update();
};
var destroyChart = function destroyChart() {
if (chart) chart.destroy();
};
useEffect(function () {
renderChart();
return function () {
return destroyChart();
var ChartComponent = /*#__PURE__*/ forwardRef(function(props, ref) {
var id = props.id, className = props.className, _height = props.height, height = _height === void 0 ? 150 : _height, _width = props.width, width = _width === void 0 ? 300 : _width, _redraw = props.redraw, redraw = _redraw === void 0 ? false : _redraw, type = props.type, data = props.data, _options = props.options, options = _options === void 0 ? {
} : _options, _plugins = props.plugins, plugins = _plugins === void 0 ? [] : _plugins, getDatasetAtEvent = props.getDatasetAtEvent, getElementAtEvent = props.getElementAtEvent, getElementsAtEvent = props.getElementsAtEvent, fallbackContent = props.fallbackContent, rest = _objectWithoutProperties(props, ["id", "className", "height", "width", "redraw", "type", "data", "options", "plugins", "getDatasetAtEvent", "getElementAtEvent", "getElementsAtEvent", "fallbackContent"]);
var canvas = useRef(null);
var computedData = useMemo(function() {
if (typeof data === 'function') {
return canvas.current ? data(canvas.current) : {
datasets: []
};
} else return merge({
}, data);
}, [
data,
canvas.current
]);
var ref1 = _slicedToArray(useState()), chart = ref1[0], setChart = ref1[1];
useImperativeHandle(ref, function() {
return chart;
}, [
chart,
]);
var renderChart = function() {
if (!canvas.current) return;
setChart(new Chart(canvas.current, {
type: type,
data: computedData,
options: options,
plugins: plugins
}));
};
}, []);
useEffect(function () {
if (redraw) {
destroyChart();
setTimeout(function () {
var onClick = function(e) {
if (!chart) return;
getDatasetAtEvent && getDatasetAtEvent(chart.getElementsAtEventForMode(e, 'dataset', {
intersect: true
}, false), e);
getElementAtEvent && getElementAtEvent(chart.getElementsAtEventForMode(e, 'nearest', {
intersect: true
}, false), e);
getElementsAtEvent && getElementsAtEvent(chart.getElementsAtEventForMode(e, 'index', {
intersect: true
}, false), e);
};
var updateChart = function() {
if (!chart) return;
if (options) {
chart.options = _objectSpread({
}, options);
}
if (!chart.config.data) {
chart.config.data = computedData;
chart.update();
return;
}
var tmp = computedData.datasets, newDataSets = tmp === void 0 ? [] : tmp, newChartData = _objectWithoutProperties(computedData, [
"datasets"
]);
var _data = chart.config.data, tmp1 = _data.datasets, currentDataSets = tmp1 === void 0 ? [] : tmp1;
// copy values
assign(chart.config.data, newChartData);
chart.config.data.datasets = newDataSets.map(function(newDataSet) {
// given the new set, find it's current match
var currentDataSet = find(currentDataSets, function(d) {
return d.label === newDataSet.label && d.type === newDataSet.type;
});
// There is no original to update, so simply add new one
if (!currentDataSet || !newDataSet.data) return _objectSpread({
}, newDataSet);
if (!currentDataSet.data) {
currentDataSet.data = [];
} else {
currentDataSet.data.length = newDataSet.data.length;
}
// copy in values
assign(currentDataSet.data, newDataSet.data);
// apply dataset changes, but keep copied data
assign(currentDataSet, _objectSpread({
}, newDataSet, {
data: currentDataSet.data
}));
return currentDataSet;
});
chart.update();
};
var destroyChart = function() {
if (chart) chart.destroy();
};
useEffect(function() {
renderChart();
}, 0);
} else {
updateChart();
}
}, [props, computedData]);
return React.createElement("canvas", Object.assign({}, rest, {
height: height,
width: width,
ref: canvas,
id: id,
className: className,
onClick: onClick,
"data-testid": 'canvas',
role: 'img'
}), fallbackContent);
return function() {
return destroyChart();
};
}, []);
useEffect(function() {
if (redraw) {
destroyChart();
setTimeout(function() {
renderChart();
}, 0);
} else {
updateChart();
}
}, [
props,
computedData
]);
return(/*#__PURE__*/ React.createElement("canvas", Object.assign({
}, rest, {
height: height,
width: width,
ref: canvas,
id: id,
className: className,
onClick: onClick,
"data-testid": "canvas",
role: "img"
}), fallbackContent));
});
var Line = forwardRef(function (props, ref) {
return React.createElement(ChartComponent, Object.assign({}, props, {
type: 'line',
ref: ref,
options: props.options || {}
}));
var Line = /*#__PURE__*/ forwardRef(function(props, ref) {
return React.createElement(ChartComponent, Object.assign({
}, props, {
type: "line",
ref: ref,
options: props.options || {
}
}));
});
var Bar = forwardRef(function (props, ref) {
return React.createElement(ChartComponent, Object.assign({}, props, {
type: 'bar',
ref: ref,
options: props.options || {}
}));
var Bar = /*#__PURE__*/ forwardRef(function(props, ref) {
return React.createElement(ChartComponent, Object.assign({
}, props, {
type: "bar",
ref: ref,
options: props.options || {
}
}));
});
var Radar = forwardRef(function (props, ref) {
return React.createElement(ChartComponent, Object.assign({}, props, {
type: 'radar',
ref: ref,
options: props.options || {}
}));
var Radar = /*#__PURE__*/ forwardRef(function(props, ref) {
return React.createElement(ChartComponent, Object.assign({
}, props, {
type: "radar",
ref: ref,
options: props.options || {
}
}));
});
var Doughnut = forwardRef(function (props, ref) {
return React.createElement(ChartComponent, Object.assign({}, props, {
type: 'doughnut',
ref: ref,
options: props.options || {}
}));
var Doughnut = /*#__PURE__*/ forwardRef(function(props, ref) {
return React.createElement(ChartComponent, Object.assign({
}, props, {
type: "doughnut",
ref: ref,
options: props.options || {
}
}));
});
var PolarArea = forwardRef(function (props, ref) {
return React.createElement(ChartComponent, Object.assign({}, props, {
type: 'polarArea',
ref: ref,
options: props.options || {}
}));
var PolarArea = /*#__PURE__*/ forwardRef(function(props, ref) {
return React.createElement(ChartComponent, Object.assign({
}, props, {
type: "polarArea",
ref: ref,
options: props.options || {
}
}));
});
var Bubble = forwardRef(function (props, ref) {
return React.createElement(ChartComponent, Object.assign({}, props, {
type: 'bubble',
ref: ref,
options: props.options || {}
}));
var Bubble = /*#__PURE__*/ forwardRef(function(props, ref) {
return React.createElement(ChartComponent, Object.assign({
}, props, {
type: "bubble",
ref: ref,
options: props.options || {
}
}));
});
var Pie = forwardRef(function (props, ref) {
return React.createElement(ChartComponent, Object.assign({}, props, {
type: 'pie',
ref: ref,
options: props.options || {}
}));
var Pie = /*#__PURE__*/ forwardRef(function(props, ref) {
return React.createElement(ChartComponent, Object.assign({
}, props, {
type: "pie",
ref: ref,
options: props.options || {
}
}));
});
var Scatter = forwardRef(function (props, ref) {
return React.createElement(ChartComponent, Object.assign({}, props, {
type: 'scatter',
ref: ref,
options: props.options || {}
}));
var Scatter = /*#__PURE__*/ forwardRef(function(props, ref) {
return React.createElement(ChartComponent, Object.assign({
}, props, {
type: "scatter",
ref: ref,
options: props.options || {
}
}));
});
var defaults = defaults$1;
var Chart = Chart$2;
export default ChartComponent;
export { Bar, Bubble, Chart, Doughnut, Line, Pie, PolarArea, Radar, Scatter, defaults };
export { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter, ChartComponent as default };
//# sourceMappingURL=index.modern.js.map

22

dist/types.d.ts

@@ -1,4 +0,4 @@

/// <reference types="react" />
import type * as Chart from 'chart.js';
export interface Props extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
import type { CanvasHTMLAttributes, ReactNode, MouseEvent } from 'react';
import type { ChartType, ChartData, ChartOptions, Plugin, InteractionItem } from 'chart.js';
export interface Props extends CanvasHTMLAttributes<HTMLCanvasElement> {
id?: string;

@@ -9,10 +9,10 @@ className?: string;

redraw?: boolean;
type: Chart.ChartType;
data: Chart.ChartData | ((canvas: HTMLCanvasElement) => Chart.ChartData);
options?: Chart.ChartOptions;
fallbackContent?: React.ReactNode;
plugins?: Chart.PluginOptionsByType<Chart.ChartType>;
getDatasetAtEvent?: (dataset: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void;
getElementAtEvent?: (element: [{}], event: React.MouseEvent<HTMLCanvasElement>) => void;
getElementsAtEvent?: (elements: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void;
type: ChartType;
data: ChartData | ((canvas: HTMLCanvasElement) => ChartData);
options?: ChartOptions;
fallbackContent?: ReactNode;
plugins?: Plugin[];
getDatasetAtEvent?: (dataset: InteractionItem[], event: MouseEvent<HTMLCanvasElement>) => void;
getElementAtEvent?: (element: InteractionItem[], event: MouseEvent<HTMLCanvasElement>) => void;
getElementsAtEvent?: (elements: InteractionItem[], event: MouseEvent<HTMLCanvasElement>) => void;
}

48

package.json
{
"name": "react-chartjs-2",
"version": "3.0.5",
"version": "3.1.0",
"description": "React components for Chart.js",
"source": "src/index.tsx",
"main": "dist/index.js",

@@ -26,16 +25,2 @@ "module": "dist/index.modern.js",

],
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"dev": "microbundle-crl --no-compress --no-sourcemap watch",
"prepublish": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint src/**/*.{ts,tsx}",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"format": "prettier --write src",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"dependencies": {

@@ -48,33 +33,2 @@ "lodash": "^4.17.19"

},
"devDependencies": {
"@testing-library/jest-dom": "^5.5.0",
"@testing-library/react": "^10.0.3",
"@types/jest": "^25.1.4",
"@types/lodash": "^4.14.150",
"@types/react": "^16.9.27",
"@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0",
"babel-eslint": "^10.0.3",
"chart.js": "^3.1.0",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"jest-canvas-mock": "^2.2.0",
"microbundle-crl": "^0.13.11",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^3.4.3",
"react-test-renderer": "^17.0.1"
},
"files": [

@@ -81,0 +35,0 @@ "dist"

2

README.md

@@ -187,3 +187,3 @@ [![build status](https://img.shields.io/travis/jerairrest/react-chartjs-2.svg?branch=master&style=flat-square)](https://travis-ci.org/jerairrest/react-chartjs-2)

### How do I acess the canvas context?
### How do I access the canvas context?

@@ -190,0 +190,0 @@ The canvas node and hence context can be accessed within the data function.

dist/__tests__/chart.test.d.ts
dist/index.umd.js
dist/react-chartjs-2.js
dist/react-chartjs-2.min.js
dist/setupTests.d.ts
dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.modern.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc