11
22``` jsx
3- import {CChartBar }from ' @coreui/react-chartjs'
3+ import {CChartScatter }from ' @coreui/react-chartjs'
44// or
5- import CChartBar from ' @coreui/react-chartjs/src/CCharts'
5+ import CChartScatter from ' @coreui/react-chartjs/src/CCharts'
66```
77
88<div className = " table-responsive table-api border rounded mb-3" >
@@ -15,8 +15,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
1515 </tr >
1616 </thead >
1717 <tbody >
18- <tr id = " cchartbar -class-name" >
19- <td className = " text-primary fw-semibold" >className<a href = " #cchartbar -class-name" aria-label = " CChartBar className permalink" className = " anchor-link after" >#</a ></td >
18+ <tr id = " cchartscatter -class-name" >
19+ <td className = " text-primary fw-semibold" >className<a href = " #cchartscatter -class-name" aria-label = " CChartScatter className permalink" className = " anchor-link after" >#</a ></td >
2020 <td >-</td >
2121 <td ><code >{ ` string ` } </code ></td >
2222 </tr >
@@ -25,8 +25,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
2525 <p >A string of all className you want applied to the base component.</p >
2626 </td >
2727 </tr >
28- <tr id = " cchartbar -custom-tooltips" >
29- <td className = " text-primary fw-semibold" >customTooltips<a href = " #cchartbar -custom-tooltips" aria-label = " CChartBar customTooltips permalink" className = " anchor-link after" >#</a ></td >
28+ <tr id = " cchartscatter -custom-tooltips" >
29+ <td className = " text-primary fw-semibold" >customTooltips<a href = " #cchartscatter -custom-tooltips" aria-label = " CChartScatter customTooltips permalink" className = " anchor-link after" >#</a ></td >
3030 <td ><code >{ ` true ` } </code ></td >
3131 <td ><code >{ ` boolean ` } </code ></td >
3232 </tr >
@@ -35,8 +35,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
3535 <p >Enables custom html based tooltips instead of standard tooltips.</p >
3636 </td >
3737 </tr >
38- <tr id = " cchartbar -data" >
39- <td className = " text-primary fw-semibold" >data<a href = " #cchartbar -data" aria-label = " CChartBar data permalink" className = " anchor-link after" >#</a ></td >
38+ <tr id = " cchartscatter -data" >
39+ <td className = " text-primary fw-semibold" >data<a href = " #cchartscatter -data" aria-label = " CChartScatter data permalink" className = " anchor-link after" >#</a ></td >
4040 <td >-</td >
4141 <td ><code >{ ` ChartData\< keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown> ` } </code >, <code >{ ` ((canvas: HTMLCanvasElement) => ChartData\< ...>) ` } </code ></td >
4242 </tr >
@@ -45,48 +45,48 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
4545 <p >The data object that is passed into the Chart.js chart (more info).</p >
4646 </td >
4747 </tr >
48- <tr id = " cchartbar -fallback-content" >
49- <td className = " text-primary fw-semibold" >fallbackContent<a href = " #cchartbar -fallback-content" aria-label = " CChartBar fallbackContent permalink" className = " anchor-link after" >#</a ></td >
48+ <tr id = " cchartscatter -fallback-content" >
49+ <td className = " text-primary fw-semibold" >fallbackContent<a href = " #cchartscatter -fallback-content" aria-label = " CChartScatter fallbackContent permalink" className = " anchor-link after" >#</a ></td >
5050 <td >-</td >
51- <td ><code >{ ` React. ReactNode` } </code ></td >
51+ <td ><code >{ ` ReactNode ` } </code ></td >
5252 </tr >
5353 <tr >
5454 <td colSpan = " 3" >
5555 <p >A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</p >
5656 </td >
5757 </tr >
58- <tr id = " cchartbar -get-dataset-at-event" >
59- <td className = " text-primary fw-semibold" >getDatasetAtEvent<a href = " #cchartbar -get-dataset-at-event" aria-label = " CChartBar getDatasetAtEvent permalink" className = " anchor-link after" >#</a ></td >
58+ <tr id = " cchartscatter -get-dataset-at-event" >
59+ <td className = " text-primary fw-semibold" >getDatasetAtEvent<a href = " #cchartscatter -get-dataset-at-event" aria-label = " CChartScatter getDatasetAtEvent permalink" className = " anchor-link after" >#</a ></td >
6060 <td >-</td >
61- <td ><code >{ ` (dataset: InteractionItem[], event:React. MouseEvent\< HTMLCanvasElement>) => void ` } </code ></td >
61+ <td ><code >{ ` (dataset: InteractionItem[], event: MouseEvent\< HTMLCanvasElement, MouseEvent >) => void ` } </code ></td >
6262 </tr >
6363 <tr >
6464 <td colSpan = " 3" >
6565 <p >Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p >
6666 </td >
6767 </tr >
68- <tr id = " cchartbar -get-element-at-event" >
69- <td className = " text-primary fw-semibold" >getElementAtEvent<a href = " #cchartbar -get-element-at-event" aria-label = " CChartBar getElementAtEvent permalink" className = " anchor-link after" >#</a ></td >
68+ <tr id = " cchartscatter -get-element-at-event" >
69+ <td className = " text-primary fw-semibold" >getElementAtEvent<a href = " #cchartscatter -get-element-at-event" aria-label = " CChartScatter getElementAtEvent permalink" className = " anchor-link after" >#</a ></td >
7070 <td >-</td >
71- <td ><code >{ ` (element: InteractionItem[], event:React. MouseEvent\< HTMLCanvasElement>) => void ` } </code ></td >
71+ <td ><code >{ ` (element: InteractionItem[], event: MouseEvent\< HTMLCanvasElement, MouseEvent >) => void ` } </code ></td >
7272 </tr >
7373 <tr >
7474 <td colSpan = " 3" >
7575 <p >Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p >
7676 </td >
7777 </tr >
78- <tr id = " cchartbar -get-elements-at-event" >
79- <td className = " text-primary fw-semibold" >getElementsAtEvent<a href = " #cchartbar -get-elements-at-event" aria-label = " CChartBar getElementsAtEvent permalink" className = " anchor-link after" >#</a ></td >
78+ <tr id = " cchartscatter -get-elements-at-event" >
79+ <td className = " text-primary fw-semibold" >getElementsAtEvent<a href = " #cchartscatter -get-elements-at-event" aria-label = " CChartScatter getElementsAtEvent permalink" className = " anchor-link after" >#</a ></td >
8080 <td >-</td >
81- <td ><code >{ ` (elements: InteractionItem[], event:React. MouseEvent\< HTMLCanvasElement>) => void ` } </code ></td >
81+ <td ><code >{ ` (elements: InteractionItem[], event: MouseEvent\< HTMLCanvasElement, MouseEvent >) => void ` } </code ></td >
8282 </tr >
8383 <tr >
8484 <td colSpan = " 3" >
8585 <p >Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</p >
8686 </td >
8787 </tr >
88- <tr id = " cchartbar -height" >
89- <td className = " text-primary fw-semibold" >height<a href = " #cchartbar -height" aria-label = " CChartBar height permalink" className = " anchor-link after" >#</a ></td >
88+ <tr id = " cchartscatter -height" >
89+ <td className = " text-primary fw-semibold" >height<a href = " #cchartscatter -height" aria-label = " CChartScatter height permalink" className = " anchor-link after" >#</a ></td >
9090 <td ><code >{ ` 150 ` } </code ></td >
9191 <td ><code >{ ` number ` } </code ></td >
9292 </tr >
@@ -95,8 +95,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
9595 <p >Height attribute applied to the rendered canvas.</p >
9696 </td >
9797 </tr >
98- <tr id = " cchartbar -id" >
99- <td className = " text-primary fw-semibold" >id<a href = " #cchartbar -id" aria-label = " CChartBar id permalink" className = " anchor-link after" >#</a ></td >
98+ <tr id = " cchartscatter -id" >
99+ <td className = " text-primary fw-semibold" >id<a href = " #cchartscatter -id" aria-label = " CChartScatter id permalink" className = " anchor-link after" >#</a ></td >
100100 <td >-</td >
101101 <td ><code >{ ` string ` } </code ></td >
102102 </tr >
@@ -105,8 +105,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
105105 <p >ID attribute applied to the rendered canvas.</p >
106106 </td >
107107 </tr >
108- <tr id = " cchartbar -options" >
109- <td className = " text-primary fw-semibold" >options<a href = " #cchartbar -options" aria-label = " CChartBar options permalink" className = " anchor-link after" >#</a ></td >
108+ <tr id = " cchartscatter -options" >
109+ <td className = " text-primary fw-semibold" >options<a href = " #cchartscatter -options" aria-label = " CChartScatter options permalink" className = " anchor-link after" >#</a ></td >
110110 <td >-</td >
111111 <td ><code >{ ` _DeepPartialObject\< CoreChartOptions\< keyof ChartTypeRegistry> & ElementChartOptions\< keyof ChartTypeRegistry> & PluginChartOptions\< ...> & DatasetChartOptions\< ...> & ScaleChartOptions\< ...>> ` } </code ></td >
112112 </tr >
@@ -115,8 +115,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
115115 <p >The options object that is passed into the Chart.js chart.</p >
116116 </td >
117117 </tr >
118- <tr id = " cchartbar -plugins" >
119- <td className = " text-primary fw-semibold" >plugins<a href = " #cchartbar -plugins" aria-label = " CChartBar plugins permalink" className = " anchor-link after" >#</a ></td >
118+ <tr id = " cchartscatter -plugins" >
119+ <td className = " text-primary fw-semibold" >plugins<a href = " #cchartscatter -plugins" aria-label = " CChartScatter plugins permalink" className = " anchor-link after" >#</a ></td >
120120 <td >-</td >
121121 <td ><code >{ ` Plugin\< keyof ChartTypeRegistry, AnyObject>[] ` } </code ></td >
122122 </tr >
@@ -125,8 +125,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
125125 <p >The plugins array that is passed into the Chart.js chart (more info)</p >
126126 </td >
127127 </tr >
128- <tr id = " cchartbar -redraw" >
129- <td className = " text-primary fw-semibold" >redraw<a href = " #cchartbar -redraw" aria-label = " CChartBar redraw permalink" className = " anchor-link after" >#</a ></td >
128+ <tr id = " cchartscatter -redraw" >
129+ <td className = " text-primary fw-semibold" >redraw<a href = " #cchartscatter -redraw" aria-label = " CChartScatter redraw permalink" className = " anchor-link after" >#</a ></td >
130130 <td ><code >{ ` false ` } </code ></td >
131131 <td ><code >{ ` boolean ` } </code ></td >
132132 </tr >
@@ -135,8 +135,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
135135 <p >If true, will tear down and redraw chart on all updates.</p >
136136 </td >
137137 </tr >
138- <tr id = " cchartbar -width" >
139- <td className = " text-primary fw-semibold" >width<a href = " #cchartbar -width" aria-label = " CChartBar width permalink" className = " anchor-link after" >#</a ></td >
138+ <tr id = " cchartscatter -width" >
139+ <td className = " text-primary fw-semibold" >width<a href = " #cchartscatter -width" aria-label = " CChartScatter width permalink" className = " anchor-link after" >#</a ></td >
140140 <td ><code >{ ` 300 ` } </code ></td >
141141 <td ><code >{ ` number ` } </code ></td >
142142 </tr >
@@ -145,8 +145,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
145145 <p >Width attribute applied to the rendered canvas.</p >
146146 </td >
147147 </tr >
148- <tr id = " cchartbar -wrapper" >
149- <td className = " text-primary fw-semibold" >wrapper<a href = " #cchartbar -wrapper" aria-label = " CChartBar wrapper permalink" className = " anchor-link after" >#</a ></td >
148+ <tr id = " cchartscatter -wrapper" >
149+ <td className = " text-primary fw-semibold" >wrapper<a href = " #cchartscatter -wrapper" aria-label = " CChartScatter wrapper permalink" className = " anchor-link after" >#</a ></td >
150150 <td ><code >{ ` true ` } </code ></td >
151151 <td ><code >{ ` boolean ` } </code ></td >
152152 </tr >