1
1
2
2
``` jsx
3
- import { CChartBar } from ' @coreui/react-chartjs'
3
+ import { CChartScatter } from ' @coreui/react-chartjs'
4
4
// or
5
- import CChartBar from ' @coreui/react-chartjs/src/CCharts'
5
+ import CChartScatter from ' @coreui/react-chartjs/src/CCharts'
6
6
```
7
7
8
8
<div className = " table-responsive table-api border rounded mb-3" >
@@ -15,8 +15,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
15
15
</tr >
16
16
</thead >
17
17
<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 >
20
20
<td >-</td >
21
21
<td ><code >{ ` string ` } </code ></td >
22
22
</tr >
@@ -25,8 +25,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
25
25
<p >A string of all className you want applied to the base component.</p >
26
26
</td >
27
27
</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 >
30
30
<td ><code >{ ` true ` } </code ></td >
31
31
<td ><code >{ ` boolean ` } </code ></td >
32
32
</tr >
@@ -35,8 +35,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
35
35
<p >Enables custom html based tooltips instead of standard tooltips.</p >
36
36
</td >
37
37
</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 >
40
40
<td >-</td >
41
41
<td ><code >{ ` ChartData\< keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown> ` } </code >, <code >{ ` ((canvas: HTMLCanvasElement) => ChartData\< ...>) ` } </code ></td >
42
42
</tr >
@@ -45,48 +45,48 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
45
45
<p >The data object that is passed into the Chart.js chart (more info).</p >
46
46
</td >
47
47
</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 >
50
50
<td >-</td >
51
- <td ><code >{ ` React. ReactNode` } </code ></td >
51
+ <td ><code >{ ` ReactNode ` } </code ></td >
52
52
</tr >
53
53
<tr >
54
54
<td colSpan = " 3" >
55
55
<p >A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</p >
56
56
</td >
57
57
</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 >
60
60
<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 >
62
62
</tr >
63
63
<tr >
64
64
<td colSpan = " 3" >
65
65
<p >Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p >
66
66
</td >
67
67
</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 >
70
70
<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 >
72
72
</tr >
73
73
<tr >
74
74
<td colSpan = " 3" >
75
75
<p >Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p >
76
76
</td >
77
77
</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 >
80
80
<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 >
82
82
</tr >
83
83
<tr >
84
84
<td colSpan = " 3" >
85
85
<p >Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</p >
86
86
</td >
87
87
</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 >
90
90
<td ><code >{ ` 150 ` } </code ></td >
91
91
<td ><code >{ ` number ` } </code ></td >
92
92
</tr >
@@ -95,8 +95,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
95
95
<p >Height attribute applied to the rendered canvas.</p >
96
96
</td >
97
97
</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 >
100
100
<td >-</td >
101
101
<td ><code >{ ` string ` } </code ></td >
102
102
</tr >
@@ -105,8 +105,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
105
105
<p >ID attribute applied to the rendered canvas.</p >
106
106
</td >
107
107
</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 >
110
110
<td >-</td >
111
111
<td ><code >{ ` _DeepPartialObject\< CoreChartOptions\< keyof ChartTypeRegistry> & ElementChartOptions\< keyof ChartTypeRegistry> & PluginChartOptions\< ...> & DatasetChartOptions\< ...> & ScaleChartOptions\< ...>> ` } </code ></td >
112
112
</tr >
@@ -115,8 +115,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
115
115
<p >The options object that is passed into the Chart.js chart.</p >
116
116
</td >
117
117
</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 >
120
120
<td >-</td >
121
121
<td ><code >{ ` Plugin\< keyof ChartTypeRegistry, AnyObject>[] ` } </code ></td >
122
122
</tr >
@@ -125,8 +125,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
125
125
<p >The plugins array that is passed into the Chart.js chart (more info)</p >
126
126
</td >
127
127
</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 >
130
130
<td ><code >{ ` false ` } </code ></td >
131
131
<td ><code >{ ` boolean ` } </code ></td >
132
132
</tr >
@@ -135,8 +135,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
135
135
<p >If true, will tear down and redraw chart on all updates.</p >
136
136
</td >
137
137
</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 >
140
140
<td ><code >{ ` 300 ` } </code ></td >
141
141
<td ><code >{ ` number ` } </code ></td >
142
142
</tr >
@@ -145,8 +145,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
145
145
<p >Width attribute applied to the rendered canvas.</p >
146
146
</td >
147
147
</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 >
150
150
<td ><code >{ ` true ` } </code ></td >
151
151
<td ><code >{ ` boolean ` } </code ></td >
152
152
</tr >
0 commit comments