1# chart 2 3The **\<chart>** component displays line charts and bar charts. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17| Name | Type | Mandatory | Description | 18| -------- | ------------------------- | ---- | ---------------------------------------- | 19| type | string | No | Chart type. Dynamic modification is not supported. Available values include:<br>- **bar**: bar chart<br>- **line**: line chart<br>Default value: **line**| 20| options | ChartOptions | Yes | Chart parameters. 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.| 21| datasets | Array<ChartDataset> | Yes | Data sets. You can set multiple datasets and their background colors. | 22| id | string | No | Unique ID of the component. | 23| style | string | No | Style declaration of the component. | 24| class | string | No | Style class of the component, which is used to refer to a style table. | 25| ref | string | No | Reference information of child elements, which is registered with the parent component on **$refs**.| 26 27 **Table 1** ChartOptions 28 29| Name | Type | Mandatory | Description | 30| ------ | ----------- | ---- | ---------------------------------------- | 31| 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. | 32| 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. | 33| series | ChartSeries | No | Data series parameters which cover the following:<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.<br>**NOTE**<br>Only line charts support this attribute.| 34 35 **Table 2** ChartDataset 36 37| Name | Type | Default Value | Mandatory | Description | 38| --------------------------- | ------------------- | -------- | ---- | -------------------- | 39| backgroundColor(deprecated) | <color> | \#ff6384 | No | Color of a line or bar. This attribute is not recommended. | 40| strokeColor | <color> | \#ff6384 | No | Line color. Only line charts support this attribute. | 41| fillColor | <color> | \#ff6384 | No | Fill color. For line charts, the value indicates the gradient color to fill. | 42| data | Array<number> | - | Yes | Data of the drawn line or bar. | 43| gradient | boolean | false | No | Whether to display the gradient 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.<br>Negative numbers are not supported. Only line charts support this attribute. | 50| max | number | 100 | No | Maximum value of the axis.<br>Negative numbers are not supported. Only line charts support this attribute. | 51| axisTick | number | 10 | No | Number of scales displayed on the axis.<br>**NOTE**<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**).<br>Lite wearables support integer calculation, and an error may occur in the case of inexhaustible division. Specifically, a segment of space may be left at the end of the x-axis.<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.| 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 | 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| 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| display | boolean | true | No | Whether to display the highlight spot. | 82 83 **Table 7** ChartLoop 84 85| Name | Type | Default Value | Mandatory | Description | 86| ------ | -------------- | ---- | ---- | ---------------------------------------- | 87| 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.| 88 89 90 91 92## Methods 93 94| Methods | Parameter | Description | 95| ------ | ---------------------------------------- | ---------------------------------------- | 96| append | {<br>serial: number, // Set the data subscript of the line chart to be updated.<br>data: Array<number>, // Set the new data.<br>} | Dynamically add data to an existing data series. The target series is specified based on **serial**, which is the subscript of the datasets array and starts from 0. **datasets[index].data** is not updated. 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.| 97 98 99## Events 100 101| Name | Parameter | Description | 102| ------------------ | --------------------------------- | ----------- | 103| click | - | Triggered when the component is clicked. | 104| longpress | - | Triggered when the component is long pressed. | 105| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.| 106 107 108## Styles 109 110| Name | Type | Default Value | Mandatory | Description | 111| ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- | 112| width | <length> \| <percentage><sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. | 113| height | <length> \| <percentage><sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. | 114| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 115| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. | 116| margin | <length> \| <percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 117| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. | 118| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. | 119| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. | 120| border-radius | <length> | - | No | Radius of round-corner borders. | 121| background-color | <color> | - | No | Background color. | 122| display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 123| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.| 124 125## Example 126 1271. Line chart 128 129 ```html 130 <!-- xxx.hml --> 131 <div class="container"> 132 <chart class="chart" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart> 133 <input class="button" type="button" value="Add data" onclick="addData"/> 134 </div> 135 ``` 136 137 138 ```css 139 /* xxx.css */ 140 .container { 141 flex-direction: column; 142 justify-content: center; 143 align-items: center; 144 width: 454px; 145 height: 454px; 146 background-color: white; 147 } 148 .chart { 149 width: 300px; 150 height: 300px; 151 } 152 .button { 153 width: 280px; 154 border-radius: 0px; 155 } 156 ``` 157 158 159 ```js 160 // xxx.js 161 export default { 162 data: { 163 lineData: [ 164 { 165 strokeColor: '#0081ff', 166 fillColor: '#cce5ff', 167 data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], 168 gradient: false, 169 } 170 ], 171 lineOps: { 172 xAxis: { 173 min: 0, 174 max: 20, 175 display: false, 176 }, 177 yAxis: { 178 min: 0, 179 max: 1000, 180 display: false, 181 }, 182 series: { 183 lineStyle: { 184 width: "5px", 185 smooth: true, 186 }, 187 headPoint: { 188 shape: "circle", 189 size: 10, 190 strokeWidth: 5, 191 fillColor: '#ffffff', 192 strokeColor: '#007aff', 193 display: true, 194 }, 195 loop: { 196 margin: 2, 197 gradient: true, 198 } 199 } 200 }, 201 }, 202 addData() { 203 this.$refs.linechart.append({ 204 serial: 0, 205 data: [Math.floor(Math.random() * 400) + 400] 206 }) 207 } 208 } 209 ``` 210 211  212 2132. Bar chart 214 215 ```html 216 <!-- xxx.hml --> 217 <div class="container"> 218 <chart class="chart" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart> 219 </div> 220 ``` 221 222 223 ```css 224 /* xxx.css */ 225 .container { 226 flex-direction: column; 227 justify-content: center; 228 align-items: center; 229 width: 454px; 230 height: 454px; 231 background-color: white; 232 } 233 .chart { 234 width: 300px; 235 height: 300px; 236 } 237 ``` 238 239 240 ```js 241 // xxx.js 242 export default { 243 data: { 244 barData: [ 245 { 246 fillColor: '#f07826', 247 data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], 248 }, 249 { 250 fillColor: '#cce5ff', 251 data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], 252 }, 253 { 254 fillColor: '#ff88bb', 255 data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], 256 }, 257 ], 258 barOps: { 259 xAxis: { 260 min: 0, 261 max: 20, 262 display: false, 263 axisTick: 10 264 }, 265 yAxis: { 266 min: 0, 267 max: 1000, 268 display: false, 269 }, 270 }, 271 } 272 } 273 ``` 274 275  276
