1# chart 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<chart>** component displays line charts, gauge charts, and bar charts. 8 9## Required Permissions 10 11None 12 13 14## Child Components 15 16Not supported 17 18 19## Attributes 20 21In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. 22 23| Name | Type | Default Value | Mandatory | Description | 24| ------------------------------ | ---------------------------------------- | ---- | ---- | ---------------------------------------- | 25| type | string | line | No | Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart<br>- **line**: line chart<br>- **gauge**: gauge chart<br>- **progress**<sup>5+</sup>: circle chart of progresses<br>- **loading**<sup>5+</sup>: circle chart of loading processes<br>- **rainbow**<sup>5+</sup>: circle chart of proportions| 26| options | ChartOptions | - | No | Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported.| 27| datasets | Array<ChartDataset> | - | No | Data sets. You must set data sets for bar charts and line charts. Data sets for a gauge chart do not take effect. You can set multiple datasets and their background colors.| 28| segments<sup>5+</sup> | DataSegment \| Array<DataSegment> | - | No | Data structures used by **progress**, **loading**, and **rainbow** charts.<br>**DataSegment** is available for **progress** and **loading** charts.<br>**Array<DataSegment>** is available for **rainbow** charts. A maximum of nine **DataSegment**s are supported in the array.| 29| effects<sup>5+</sup> | boolean | true | No | Whether to enable the effects for **progress** and **rainbow** charts. | 30| animationduration<sup>6+</sup> | number | 3000 | No | Animation duration for expanding a **rainbow** chart, in milliseconds. | 31 32**Table 1** ChartOptions 33 34| Name | Type | Default Value | Mandatory | Description | 35| ------ | ----------- | ---- | ---- | ---------------------------------------- | 36| xAxis | ChartAxis | - | Yes | X-axis parameters. You can set the minimum value, maximum value, and scale of the x-axis, and whether to display the x-axis. | 37| yAxis | ChartAxis | - | Yes | Y-axis parameters. You can set the minimum value, maximum value, and scale of the y-axis, and whether to display the y-axis. | 38| series | ChartSeries | - | No | Data sequence parameters. Only line charts support this attribute.<br>- Line style, such as the line width and whether the line is smooth.<br>- Style and size of the white point at the start of the line.| 39 40**Table 2** ChartDataset 41 42| Name | Type | Default Value | Mandatory | Description | 43| ----------- | ---------------------------------------- | -------- | ---- | ---------------------- | 44| strokeColor | <color> | \#ff6384 | No | Stroke color. Only line charts support this attribute. | 45| fillColor | <color> | \#ff6384 | No | Fill color.<br>For line charts, the value indicates the gradient color to fill.| 46| data | Array<number> \| Array<Point><sup>5+</sup> | - | Yes | Data of the drawn line or bar. | 47| gradient | boolean | false | No | Whether to display the gradient color. Only line charts support this attribute. | 48 49**Table 3** ChartAxis 50 51| Name | Type | Default Value | Mandatory | Description | 52| -------- | ------------- | -------- | ---- | ---------------------------------------- | 53| min | number | 0 | No | Minimum value of the axis. Only line charts support negative numbers. | 54| max | number | 100 | No | Maximum value of the axis. Only line charts support negative numbers. | 55| axisTick | number | 10 | No | Number of scales displayed on the axis. The value ranges from 1 to 20. The display effect depends on the calculation result of Number of pixels occupied by the image width/(**max** – **min**).<br>In the bar chart, the number of bars in each group of data is the same as the number of scales, and the bars are displayed at the scales.| 56| display | boolean | false | No | Whether to display the axis. | 57| color | <color> | \#c0c0c0 | No | Axis color. | 58 59**Table 4** ChartSeries 60 61| Name | Type | Default Value | Mandatory | Description | 62| ----------- | -------------- | ---- | ---- | -------------------- | 63| lineStyle | ChartLineStyle | - | No | Line style, such as the line width and whether the line is smooth. | 64| headPoint | PointStyle | - | No | Style and size of the white point at the start of the line. | 65| topPoint | PointStyle | - | No | Style and size of the top point. | 66| bottomPoint | PointStyle | - | No | Style and size of the bottom point. | 67| loop | ChartLoop | - | No | Whether to start drawing again when the screen is looped.| 68 69**Table 5** ChartLineStyle 70 71| Name | Type | Default Value | Mandatory | Description | 72| ------ | -------------- | ----- | ---- | ----- | 73| width | <length> | 1px | No | Line width.| 74| smooth | boolean | false | No | Whether the line is smooth.| 75 76**Table 6** PointStyle 77 78| Name | Type | Default Value | Mandatory | Description | 79| ----------- | -------------- | -------- | ---- | ---------------------------------------- | 80| shape | string | circle | No | Shape of the highlight point. Available values are as follows:<br>- circle<br>- square<br>- triangle| 81| size | <length> | 5px | No | Size of the highlight point. | 82| strokeWidth | <length> | 1px | No | Stroke width. | 83| strokeColor | <color> | \#ff0000 | No | Stroke color. | 84| fillColor | <color> | \#ff0000 | No | Fill color. | 85 86**Table 7** ChartLoop 87 88| Name | Type | Default Value | Mandatory | Description | 89| -------- | -------------- | ----- | ---- | ---------------------------------------- | 90| margin | <length> | 1 | No | Number of erased points (horizontal distance between the latest drawn point and the earliest point). You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint** for mini-, small- and standard-system devices. If you do so, there is a possibility that the point is in the erase area and invisible.| 91| gradient | boolean | false | No | Whether to perform gradient erase. | 92 93**Table 8** Point<sup>5+</sup> 94 95| Name | Type | Default Value | Mandatory | Description | 96| ------------ | ------------- | -------- | ---- | ---------------------------------------- | 97| value | number | 0 | Yes | Y coordinate of the point to draw. | 98| pointStyle | PointStyle | - | No | Style of the point. | 99| description | string | - | No | Description text of the point. | 100| textLocation | string | - | No | Position of the description text relative to the point. Available values are as follows: **top**: above the point<br>**bottom**: below the point<br>**none**: not displayed| 101| textColor | <color> | \#000000 | No | Color of the description text. | 102| lineDash | string | solid | No | Dashed line pattern. You can set the dash length and space length between the dashes. - **"dashed, 5, 5"**: dashed line with each dash in 5 px and a 5 px space between each two dashes. Default value **"solid"** indicates a solid line.| 103| lineColor | <color> | \#000000 | No | Line color. If this attribute is not set, the value of **strokeColor** is used. | 104 105**Table 9** DataSegment<sup>5+</sup> 106 107| Name | Type | Default Value | Mandatory | Description | 108| ---------- | ------ | ---- | ---- | ---------------------------------------- | 109| startColor | Color | - | No | Color of the start position. If this attribute is set, **endColor** must be set. If this attribute is not set, the default color array preset in the system is used. For details about the color values, see the next table.| 110| endColor | Color | - | No | Color of the end position. If this attribute is set, **startColor** must be set.<br>If this attribute is not set, the default color array preset in the system is used.| 111| value | number | 0 | Yes | Percentage for the data segment. The maximum value is **100**. | 112| name | string | - | No | Name of the data segment. | 113 114| Data Segment | Light Mode | Dark Mode | 115| ---- | --------------------------- | --------------------------- | 116| 0 | Start color: \#f7ce00; end color: \#f99b11| Start color: \#d1a738; end color: \#eb933d| 117| 1 | Start color: \#f76223; end color: \#f2400a| Start color: \#e67d50; end color: \#d9542b| 118| 2 | Start color: \#f772ac; end color: \#e65392| Start color: \#d5749e; end color: \#d6568d| 119| 3 | Start color: \#a575eb; end color: \#a12df7| Start color: \#9973d1; end color: \#5552d9| 120| 4 | Start color: \#7b79f7; end color: \#4b48f7| Start color: \#7977d9; end color: \#f99b11| 121| 5 | Start color: \#4b8af3; end color: \#007dff| Start color: \#4c81d9; end color: \#217bd9| 122| 6 | Start color: \#73c1e6; end color: \#4fb4e3| Start color: \#5ea6d1; end color: \#4895c2| 123| 7 | Start color: \#a5d61d; end color: \#69d14f| Start color: \#91c23a; end color: \#70ba5d| 124| 8 | Start color: \#a2a2b0; end color: \#8e8e93| Start color: \#8c8c99; end color: \#6b6b76| 125 126For the **gauge** charts, the following attributes are also supported. 127 128| Name | Type | Default Value | Mandatory | Description | 129| ------- | ------ | ---- | ---- | ---------------------- | 130| percent | number | 0 | No | Percentage of the current value to the total value. The value ranges from 0 to 100.| 131 132 133## Styles 134 135 136 137In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. 138 139| Name | Type | Default Value | Mandatory | Description | 140| ------------------------ | -------------- | -------------------------- | ---- | ---------------------------------------- | 141| stroke-width | <length> | 32px (**gauge** charts)<br>24px (**rainbow** charts)| No | Width of the scale bar for **gauge** and **rainbow** charts. | 142| start-angle | <deg> | 240 (**gauge** charts)<br>0 (**rainbow** charts) | No | Start angle of the scale bar for **gauge** and **rainbow** charts, which starts from zero o'clock. The value ranges from 0 to 360. | 143| total-angle | <deg> | 240 (**gauge** charts)<br>360 (**rainbow** charts) | No | Total length of the scale bar for **gauge** and **rainbow** charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction.| 144| center-x | <length> | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-y** and **radius**. This style is supported by the gauge chart only.| 145| center-y | <length> | - | No | Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **position** style in the common styles, and must be used together with **center-x** and **radius**. This style is supported by the gauge chart only.| 146| radius | <length> | - | No | Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the **width** and **height** in the common styles, and must be used together with **center-x** and **center-y**. This style is supported by the gauge chart only.| 147| colors | Array | - | No | Color of each section for the scale bar of the gauge component.<br>For example, **colors: \#ff0000, \#00ff00**. This style is supported by the gauge chart only.| 148| weights | Array | - | No | Weight of each section for the scale bar of the gauge component.<br>For example, **weights: 2, 2**. This style is supported by the gauge chart only.| 149| font-family<sup>5+</sup> | Array | - | No | Font style of the description text. You can use a [custom font](../arkui-js/js-components-common-customizing-font.md).| 150| font-size<sup>5+</sup> | <length> | - | No | Font size of the description text. | 151 152 153## Events 154 155The [universal events](../arkui-js/js-components-common-events.md) are supported. 156 157 158## Methods 159 160In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported. 161 162| Name | Parameter | Description | 163| ------ | ---------------------------------------- | ---------------------------------------- | 164| append | {<br>serial: number, <br>data: Array<number>, <br>} | Data is dynamically added to an existing data sequence. The target sequence is specified based on **serial**, which is the subscript of the datasets array and starts from 0. For example, if the value of **serial** is **index**, use **data** to update **datasets[index].data**. Only line charts support this attribute. The value is incremented by 1 based on the horizontal coordinate and is related to the **xAxis min/max** setting.| 165 166## Example 167 1681. Line chart 169 ```html 170 <!-- xxx.hml --> 171 <div class="container"> 172 <stack class="chart-region"> 173 <image class="chart-background" src="common/background.png"></image> 174 <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart> 175 </stack> 176 <button value="Add data" onclick="addData"></button> 177 </div> 178 ``` 179 180 ```css 181 /* xxx.css */ 182 .container { 183 flex-direction: column; 184 justify-content: center; 185 align-items: center; 186 } 187 .chart-region { 188 height: 400px; 189 width: 700px; 190 } 191 .chart-background { 192 object-fit: fill; 193 } 194 .chart-data { 195 width: 700px; 196 height: 600px; 197 } 198 button { 199 width: 100%; 200 height: 50px; 201 background-color: #F4F2F1; 202 text-color: #0C81F3; 203 } 204 ``` 205 206 ```js 207 // xxx.js 208 export default { 209 data: { 210 lineData: [ 211 { 212 strokeColor: '#0081ff', 213 fillColor: '#cce5ff', 214 data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], 215 gradient: true 216 } 217 ], 218 lineOps: { 219 xAxis: { 220 min: 0, 221 max: 20, 222 display: false 223 }, 224 yAxis: { 225 min: 0, 226 max: 1000, 227 display: false 228 }, 229 series: { 230 lineStyle: { 231 width: "5px", 232 smooth: true 233 }, 234 headPoint: { 235 shape: "circle", 236 size: 20, 237 strokeWidth: 5, 238 fillColor: '#ffffff', 239 strokeColor: '#007aff', 240 display: true 241 }, 242 loop: { 243 margin: 2, 244 gradient: true 245 } 246 } 247 } 248 }, 249 addData() { 250 this.$refs.linechart.append({ 251 serial: 0, 252 data: [Math.floor(Math.random() * 400) + 400] 253 }) 254 } 255 } 256 ``` 257 258  259 2602. Bar chart 261 ```html 262 <!-- xxx.hml --> 263 <div class="container"> 264 <stack class="data-region"> 265 <image class="data-background" src="common/background.png"></image> 266 <chart class="data-bar" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart> 267 </stack> 268 </div> 269 ``` 270 271 ```css 272 /* xxx.css */ 273 .container { 274 flex-direction: column; 275 justify-content: center; 276 align-items: center; 277 } 278 .data-region { 279 height: 400px; 280 width: 700px; 281 } 282 .data-background { 283 object-fit: fill; 284 } 285 .data-bar { 286 width: 700px; 287 height: 400px; 288 } 289 ``` 290 291 ```js 292 // xxx.js 293 export default { 294 data: { 295 barData: [ 296 { 297 fillColor: '#f07826', 298 data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628] 299 }, 300 { 301 fillColor: '#cce5ff', 302 data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410] 303 }, 304 { 305 fillColor: '#ff88bb', 306 data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657] 307 }, 308 ], 309 barOps: { 310 xAxis: { 311 min: 0, 312 max: 20, 313 display: false, 314 axisTick: 10 315 }, 316 yAxis: { 317 min: 0, 318 max: 1000, 319 display: false 320 } 321 } 322 } 323 } 324 ``` 325 326  327 3283. Gauge chart 329 ```html 330 <!-- xxx.hml --> 331 <div class="container"> 332 <div class="gauge-region"> 333 <chart class="data-gauge" type="gauge" percent = "50"></chart> 334 </div> 335 </div> 336 ``` 337 338 ```css 339 /* xxx.css */ 340 .container { 341 flex-direction: column; 342 justify-content: center; 343 align-items: center; 344 } 345 .gauge-region { 346 height: 400px; 347 width: 400px; 348 } 349 .data-gauge { 350 colors: #83f115, #fd3636, #3bf8ff; 351 weights: 4, 2, 1; 352 } 353 ``` 354 355  356 3574. Circle chart of progresses, loading progresses, or proportions 358 ```html 359 <!-- xxx.hml --> 360 <div class="container"> 361 <text class="text">progress Example</text> 362 <stack class="chart-region"> 363 <chart class="" type="progress" segments="{{ progressdata }}"></chart> 364 </stack> 365 <text class="text">loading Example</text> 366 <stack class="chart-region"> 367 <chart class="" type="loading" segments="{{ loadingdata }}"></chart> 368 </stack> 369 <text class="text">rainbow Example</text> 370 <stack class="chart-region"> 371 <chart class="" type="rainbow" segments="{{ rainbowdata }}" effects="true" animationduration="5000"></chart> 372 </stack> 373 </div> 374 ``` 375 ```css 376 /* xxx.css */ 377 .container { 378 flex-direction: column; 379 justify-content: center; 380 align-items: center; 381 } 382 .chart-region { 383 height: 400px; 384 width: 700px; 385 margin-top: 10px; 386 } 387 .text { 388 margin-top: 30px; 389 } 390 ``` 391 ```js 392 // xxx.js 393 export default { 394 data: { 395 progressdata: { 396 value: 50, 397 name: 'progress' 398 }, 399 loadingdata: { 400 startColor: "#ffc0cb", 401 endColor: "#00bfff", 402 }, 403 rainbowdata: [ 404 { 405 value: 50, 406 name: 'item1' 407 }, 408 { 409 value: 10, 410 name: 'item2' 411 }, 412 { 413 value: 20, 414 name: 'item3' 415 }, 416 { 417 value: 10, 418 name: 'item4' 419 }, 420 { 421 value: 10, 422 name: 'item5' 423 } 424 ] 425 } 426 } 427 ``` 428  429
