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