1# chart 2 3 4The **\<chart>** component displays line charts, gauge charts, and bar charts. 5 6> **NOTE** 7> 8> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17In addition to the [universal attributes](js-service-widget-common-attributes.md), the following attributes are supported. 18 19| Name | Type | Default Value| Mandatory| Description | 20| ----------------- | ---------------------------------- | ------ | ---- | ------------------------------------------------------------ | 21| 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**: circle chart of progresses<br>- **loading**: circle chart of loading processes<br>- **rainbow**: circle chart of proportions.| 22| options | ChartOptions | - | No | Chart parameters. 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.| 23| datasets | Array\<ChartDataset> | - | No | Data sets. Data sets for a gauge chart do not take effect. You can set multiple datasets and their background colors. | 24| segments | DataSegment \| Array\<DataSegment> | | No | Data structures used by **progress**, **loading**, and **rainbow** charts.<br>The **DataSegment** type is applicable to **progress** and **loading** charts. The **Array\<DataSegment>** type is applicable to **rainbow** charts. A maximum of nine **DataSegment**s are supported.| 25| effects | boolean | true | No | Whether to enable the effects for **progress** and **rainbow** charts. | 26| animationduration | number | 3000 | No | Animation duration for expanding a **rainbow** chart, in milliseconds. | 27 28**Table 1** ChartOptions 29 30| Name | Type | Default Value | Mandatory | Description | 31| ------ | --------- | ---- | ---- | ---------------------------------------- | 32| 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. | 33| 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. | 34| series | ChartAxis | - | No | Data series. Only line charts support this attribute. Available values include:<br>- Line styles, 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.| 35 36**Table 2** ChartDataset 37 38| Name | Type | Default Value | Mandatory | Description | 39| ----------- | ---------------------------------------- | -------- | ---- | -------------------- | 40| strokeColor | <color> | \#ff6384 | No | Line color. Only line charts support this attribute. | 41| fillColor | <color> | \#ff6384 | No | Fill color. For line charts, this attribute indicates a gradient fill color. | 42| data | Array<number> \| Array\<Point> | - | Yes | Data of the drawn line or bar. | 43| gradient | boolean | false | No | Whether to display the gradient fill color. Only line charts support this attribute.| 44 45**Table 3** ChartAxis 46 47| Name | Type | Default Value | Mandatory | Description | 48| -------- | ------------- | -------- | ---- | ---------------------------------------- | 49| min | number | 0 | No | Minimum value of the axis. Negative numbers are not supported. Only line charts support this attribute. | 50| max | number | 100 | No | Maximum value of the axis. Negative numbers are not supported. Only line charts support this attribute. | 51| axisTick | number | 10 | No | Number of scales displayed on the axis.<br>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**). 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.| 52| display | boolean | false | No | Whether to display the axis. | 53| color | <color> | \#c0c0c0 | No | Axis color. | 54 55**Table 4** ChartSeries 56 57| Name | Type | Default Value | Mandatory | Description | 58| ----------- | -------------- | ---- | ---- | -------------------- | 59| lineStyle | ChartLineStyle | - | No | Line style, such as the line width and whether the line is smooth. | 60| headPoint | PointStyle | - | No | Style and size of the white point at the start of the line. | 61| topPoint | PointStyle | - | No | Style and size of the top point. | 62| bottomPoint | PointStyle | - | No | Style and size of the bottom point. | 63| loop | ChartLoop | - | No | Whether to start drawing again when the screen is looped.| 64 65 **Table 5** ChartLineStyle 66 67| Name | Type | Default Value | Mandatory | Description | 68| ------ | -------------- | ----- | ---- | ----- | 69| width | <length> | 1px | No | Line width.| 70| smooth | boolean | false | No | Whether the line is smooth.| 71 72**Table 6** PointStyle 73 74| Name | Type | Default Value | Mandatory | Description | 75| ----------- | -------------- | -------- | ---- | ---------------------------------------- | 76| shape | string | circle | No | Shape of the highlight point. Available values are as follows:<br>- circle<br>- square<br>- triangle| 77| size | <length> | 5px | No | Size of the highlight point. | 78| strokeWidth | <length> | 1px | No | Stroke width. | 79| strokeColor | <color> | \#ff0000 | No | Stroke color. | 80| fillColor | <color> | \#ff0000 | No | Fill color. | 81 82**Table 7** ChartLoop 83 84| Name | Type | Default Value | Mandatory | Description | 85| -------- | -------------- | ----- | ---- | ---------------------------------------- | 86| margin | <length> | 1 | No | Number of erased points (horizontal distance between the latest drawn point and the earliest point).<br>You are not advised to use **margin** together with **topPoint**, **bottomPoint**, or **headPoint**. If you do so, there is a possibility that the point is in the erase area and is invisible.| 87| gradient | boolean | false | No | Whether to perform gradient erase. | 88 89**Table 8** Point 90 91| Name | Type | Default Value | Mandatory | Description | 92| ------------ | ------------- | -------- | ---- | ---------------------------------------- | 93| value | number | 0 | Yes | Y coordinate of the point to draw. | 94| pointStyle | PointStyle | - | No | Style of the point. | 95| description | string | - | No | Description of the point. | 96| textLocation | string | - | No | Location of the description. Available values are as follows:<br>- **"top"**: The description is above the point.<br>- **"bottom"**: The description is below the point.<br>- **"none"**: The description is not displayed.| 97| textColor | <color> | \#000000 | No | Color of the description text. | 98| lineDash | string | solid | No | Dashed line pattern. You can set the dash length and space length between the dashes.<br>- **"dashed, 5, 5"**: dashed line with each dash in 5 px and a 5 px space between dashes.<br>- **"solid"**: solid line.| 99| lineColor | <color> | \#000000 | No | Line color. If this attribute is not set, the value of **strokeColor** is used. | 100 101**Table 9** DataSegment 102 103| Name | Type | Default Value | Mandatory | Description | 104| ---------- | ------ | ---- | ---- | ---------------------------------------- | 105| 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 following table.| 106| 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.| 107| value | number | 0 | Yes | Percentage for the current data segment. The maximum value is **100**. | 108| name | string | - | No | Name of the data segment. | 109 110| Data Segment | Light Theme | Dark Theme | 111| ---- | --------------------------- | --------------------------- | 112| 0 | Start color: \#f7ce00; end color: \#f99b11| Start color: \#d1a738; end color: \#eb933d| 113| 1 | Start color: \#f76223; end color: \#f2400a| Start color: \#e67d50; end color: \#d9542b| 114| 2 | Start color: \#f772ac; end color: \#e65392| Start color: \#d5749e; end color: \#d6568d| 115| 3 | Start color: \#a575eb; end color: \#a12df7| Start color: \#9973d1; end color: \#5552d9| 116| 4 | Start color: \#7b79f7; end color: \#4b48f7| Start color: \#7977d9; end color: \#f99b11| 117| 5 | Start color: \#4b8af3; end color: \#007dff| Start color: \#4c81d9; end color: \#217bd9| 118| 6 | Start color: \#73c1e6; end color: \#4fb4e3| Start color: \#5ea6d1; end color: \#4895c2| 119| 7 | Start color: \#a5d61d; end color: \#69d14f| Start color: \#91c23a; end color: \#70ba5d| 120| 8 | Start color: \#a2a2b0; end color: \#8e8e93| Start color: \#8c8c99; end color: \#6b6b76| 121 122For the **gauge** charts, the following attributes are also supported. 123 124| Name | Type | Default Value | Mandatory | Description | 125| ------- | ------ | ---- | ---- | ---------------------- | 126| percent | number | 0 | No | Percentage of the current value to the total value. The value ranges from 0 to 100.| 127 128 129## Styles 130 131In addition to the [universal styles](js-service-widget-common-styles.md), the following styles are supported. 132 133| Name | Type | Default Value | Mandatory | Description | 134| ------------ | -------------- | -------------------------- | ---- | ---------------------------------------- | 135| stroke-width | <length> | 32px (**gauge** charts)<br>24px (**rainbow** charts)| No | Width of the scale bar for **gauge** and **rainbow** charts. | 136| 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. | 137| 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.| 138| center-x | <length> | - | No | X-coordinate of the scale bar center position for **gauge** charts. This style takes precedence over the **position** universal style and<br>must be used together with **center-y** and **radius**.| 139| center-y | <length> | - | No | Y-coordinate of the scale bar center position for **gauge** charts. This style takes precedence over the **position** universal style and<br>must be used together with **center-x** and **radius**.| 140| radius | <length> | - | No | Radius of the scale bar for **gauge** charts. This style takes precedence over the **width** and **height** universal style and<br>must be used together with **center-x** and **center-y**.| 141| colors | Array | - | No | Colors of ranges on the scale bar for **gauge** charts.<br>For example, **colors: \#ff0000, \#00ff00**.| 142| weights | Array | - | No | Weights of ranges on the scale bar for **gauge** charts.<br>For example, **weights: 2, 2**.| 143| font-family | Array | - | No | Font style of the description text. You can use a [custom font](js-service-widget-common-customizing-font.md).| 144| font-size | <length> | - | No | Font size of the description text. | 145 146 147## Events 148 149The [universal events](js-service-widget-common-events.md) are supported. 150 151 152## Example 153 1541. Line chart 155 156 ```html 157 <!-- xxx.hml --> 158 <div class="container"> 159 <stack class="chart-region"> 160 <image class="chart-background" src="common/background.png"></image> 161 <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart> 162 </stack> 163 </div> 164 ``` 165 166 167 ```css 168 /* xxx.css */ 169 .container { 170 flex-direction: column; 171 justify-content: center; 172 align-items: center; 173 } 174 .chart-region { 175 height: 400px; 176 width: 700px; 177 } 178 .chart-background { 179 object-fit: fill; 180 } 181 .chart-data { 182 width: 700px; 183 height: 600px; 184 } 185 ``` 186 187 188 ```json 189 // xxx.json 190 { 191 "data": { 192 "lineData": [ 193 { 194 "strokeColor": "#0081ff", 195 "fillColor": "#cce5ff", 196 "data": [ 197 763, 198 550, 199 551, 200 554, 201 731, 202 654, 203 525, 204 696, 205 595, 206 628, 207 791, 208 505, 209 613, 210 575, 211 475, 212 553, 213 491, 214 680, 215 657, 216 716 217 ], 218 "gradient": true 219 } 220 ], 221 "lineOps": { 222 "xAxis": { 223 "min": 0, 224 "max": 20, 225 "display": false 226 }, 227 "yAxis": { 228 "min": 0, 229 "max": 1000, 230 "display": false 231 }, 232 "series": { 233 "lineStyle": { 234 "width": "5px", 235 "smooth": true 236 }, 237 "headPoint": { 238 "shape": "circle", 239 "size": 20, 240 "strokeWidth": 5, 241 "fillColor": "#ffffff", 242 "strokeColor": "#007aff", 243 "display": true 244 }, 245 "loop": { 246 "margin": 2, 247 "gradient": true 248 } 249 } 250 } 251 } 252 } 253 ``` 254 **4 x 4 widget** 255 256 257 2582. Bar chart 259 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 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 292 ```json 293 { 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 **4 x 4 widget** 326 327 328 3293. Gauge chart 330 331 332 ```html 333 <!-- xxx.hml --> 334 <div class="container"> 335 <div class="gauge-region"> 336 <chart class="data-gauge" type="gauge" percent = "50"></chart> 337 </div> 338 </div> 339 ``` 340 341 342 ```css 343 /* xxx.css */ 344 .container { 345 flex-direction: column; 346 justify-content: center; 347 align-items: center; 348 } 349 .gauge-region { 350 height: 400px; 351 width: 400px; 352 } 353 .data-gauge { 354 colors: #83f115, #fd3636, #3bf8ff; 355 weights: 4, 2, 1; 356 } 357 ``` 358 **4 x 4 widget** 359 360 361
