@vaadin/charts 25.1.0-alpha7 → 25.1.0-alpha9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/charts",
3
- "version": "25.1.0-alpha7",
3
+ "version": "25.1.0-alpha9",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,17 +35,17 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/component-base": "25.1.0-alpha7",
39
- "@vaadin/vaadin-themable-mixin": "25.1.0-alpha7",
38
+ "@vaadin/component-base": "25.1.0-alpha9",
39
+ "@vaadin/vaadin-themable-mixin": "25.1.0-alpha9",
40
40
  "highcharts": "12.2.0",
41
41
  "lit": "^3.0.0"
42
42
  },
43
43
  "devDependencies": {
44
- "@vaadin/aura": "25.1.0-alpha7",
45
- "@vaadin/chai-plugins": "25.1.0-alpha7",
46
- "@vaadin/test-runner-commands": "25.1.0-alpha7",
44
+ "@vaadin/aura": "25.1.0-alpha9",
45
+ "@vaadin/chai-plugins": "25.1.0-alpha9",
46
+ "@vaadin/test-runner-commands": "25.1.0-alpha9",
47
47
  "@vaadin/testing-helpers": "^2.0.0",
48
- "@vaadin/vaadin-lumo-styles": "25.1.0-alpha7",
48
+ "@vaadin/vaadin-lumo-styles": "25.1.0-alpha9",
49
49
  "sinon": "^21.0.0"
50
50
  },
51
51
  "cvdlName": "vaadin-chart",
@@ -54,5 +54,5 @@
54
54
  "web-types.json",
55
55
  "web-types.lit.json"
56
56
  ],
57
- "gitHead": "98c586125f769c8fefd307536965293668fda81d"
57
+ "gitHead": "ef432311376ba3dac4233cb23d393a49a425e0a4"
58
58
  }
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/charts",
4
- "version": "25.1.0-alpha7",
4
+ "version": "25.1.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -11,104 +11,104 @@
11
11
  "description": "`<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.\n\n### Basic use\n\nTo use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:\n\n```html\n<vaadin-chart>\n <vaadin-chart-series></vaadin-chart-series>\n</vaadin-chart>\n```\n\n`<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:\n\n```html\n<vaadin-chart-series values=\"[10, 20, 30, 40, 50]\"></vaadin-chart-series>\n```\n\nwhich will add a new line series, where each value will be a data point.\nLook for the Properties session to see all available attributes.\n\n### Dynamically adding and removing series\n\nYou are also able to add and remove series by using DOM API.\n\nTo create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nconst newSeries = document.createElement('vaadin-chart-series');\nnewSeries.values = [10, 20, 30, 40, 50];\nchart.appendChild(newSeries);\n```\n\nIn order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nconst seriesToBeRemoved = chart.querySelector('vaadin-chart-series');\nchart.removeChild(seriesToBeRemoved);\n```",
12
12
  "attributes": [
13
13
  {
14
- "name": "value-min",
15
- "description": "Value-axis minimum-value.\nSets the value to a series bound by 'unit' property.\nOtherwise sets the value to the first series.\nUndefined by default (determined from data).",
14
+ "name": "markers",
15
+ "description": "Shows/hides data-point markers for line-like series.\nAcceptable input are:\n - `shown`: markers are always visible\n - `hidden`: markers are always hidden\n - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*",
16
16
  "value": {
17
17
  "type": [
18
- "number",
19
- "null",
18
+ "ChartSeriesMarkers",
20
19
  "undefined"
21
20
  ]
22
21
  }
23
22
  },
24
23
  {
25
- "name": "value-max",
26
- "description": "Value-axis maximum-value.\nSee the 'valueMin'",
24
+ "name": "neck-position",
25
+ "description": "The height of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area height. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
27
26
  "value": {
28
27
  "type": [
29
28
  "number",
30
- "null",
31
- "undefined"
29
+ "string"
32
30
  ]
33
31
  }
34
32
  },
35
33
  {
36
- "name": "type",
37
- "description": "A string with the type of the series.\nDefaults to `'line'` in case no type is set for the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.",
34
+ "name": "neck-width",
35
+ "description": "The width of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area width. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
38
36
  "value": {
39
37
  "type": [
40
- "string",
41
- "null",
42
- "undefined"
38
+ "number",
39
+ "string"
43
40
  ]
44
41
  }
45
42
  },
46
43
  {
47
- "name": "title",
48
- "description": "The name of the series as shown in the legend, tooltip etc.",
44
+ "name": "stack",
45
+ "description": "Used to group series in a different stacks.\n\"stacking\" property should be specified either for each series or in plotOptions.\nIt is recommended to place series in a single stack, when they belong to the same yAxis.",
49
46
  "value": {
50
47
  "type": [
48
+ "number",
51
49
  "string"
52
50
  ]
53
51
  }
54
52
  },
55
53
  {
56
- "name": "markers",
57
- "description": "Shows/hides data-point markers for line-like series.\nAcceptable input are:\n - `shown`: markers are always visible\n - `hidden`: markers are always hidden\n - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*",
54
+ "name": "theme",
55
+ "description": "The theme variants to apply to the component.",
58
56
  "value": {
59
57
  "type": [
60
- "ChartSeriesMarkers",
58
+ "string",
59
+ "null",
61
60
  "undefined"
62
61
  ]
63
62
  }
64
63
  },
65
64
  {
66
- "name": "unit",
67
- "description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
65
+ "name": "title",
66
+ "description": "The name of the series as shown in the legend, tooltip etc.",
68
67
  "value": {
69
68
  "type": [
70
- "string",
71
- "null",
72
- "undefined"
69
+ "string"
73
70
  ]
74
71
  }
75
72
  },
76
73
  {
77
- "name": "stack",
78
- "description": "Used to group series in a different stacks.\n\"stacking\" property should be specified either for each series or in plotOptions.\nIt is recommended to place series in a single stack, when they belong to the same yAxis.",
74
+ "name": "type",
75
+ "description": "A string with the type of the series.\nDefaults to `'line'` in case no type is set for the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.",
79
76
  "value": {
80
77
  "type": [
81
- "number",
82
- "string"
78
+ "string",
79
+ "null",
80
+ "undefined"
83
81
  ]
84
82
  }
85
83
  },
86
84
  {
87
- "name": "neck-position",
88
- "description": "The height of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area height. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
85
+ "name": "unit",
86
+ "description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
89
87
  "value": {
90
88
  "type": [
91
- "number",
92
- "string"
89
+ "string",
90
+ "null",
91
+ "undefined"
93
92
  ]
94
93
  }
95
94
  },
96
95
  {
97
- "name": "neck-width",
98
- "description": "The width of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area width. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
96
+ "name": "value-max",
97
+ "description": "Value-axis maximum-value.\nSee the 'valueMin'",
99
98
  "value": {
100
99
  "type": [
101
100
  "number",
102
- "string"
101
+ "null",
102
+ "undefined"
103
103
  ]
104
104
  }
105
105
  },
106
106
  {
107
- "name": "theme",
108
- "description": "The theme variants to apply to the component.",
107
+ "name": "value-min",
108
+ "description": "Value-axis minimum-value.\nSets the value to a series bound by 'unit' property.\nOtherwise sets the value to the first series.\nUndefined by default (determined from data).",
109
109
  "value": {
110
110
  "type": [
111
- "string",
111
+ "number",
112
112
  "null",
113
113
  "undefined"
114
114
  ]
@@ -118,69 +118,67 @@
118
118
  "js": {
119
119
  "properties": [
120
120
  {
121
- "name": "values",
122
- "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n - An array of numerical values `[y0, y1, y2, y3,...]`\n - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)",
121
+ "name": "additionalOptions",
122
+ "description": "Represents additional JSON configuration.",
123
123
  "value": {
124
124
  "type": [
125
- "ChartSeriesValues"
125
+ "SeriesOptionsType",
126
+ "undefined"
126
127
  ]
127
128
  }
128
129
  },
129
130
  {
130
- "name": "valueMin",
131
- "description": "Value-axis minimum-value.\nSets the value to a series bound by 'unit' property.\nOtherwise sets the value to the first series.\nUndefined by default (determined from data).",
131
+ "name": "markers",
132
+ "description": "Shows/hides data-point markers for line-like series.\nAcceptable input are:\n - `shown`: markers are always visible\n - `hidden`: markers are always hidden\n - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*",
132
133
  "value": {
133
134
  "type": [
134
- "number",
135
- "null",
135
+ "ChartSeriesMarkers",
136
136
  "undefined"
137
137
  ]
138
138
  }
139
139
  },
140
140
  {
141
- "name": "valueMax",
142
- "description": "Value-axis maximum-value.\nSee the 'valueMin'",
141
+ "name": "neckPosition",
142
+ "description": "The height of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area height. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
143
143
  "value": {
144
144
  "type": [
145
145
  "number",
146
- "null",
147
- "undefined"
146
+ "string"
148
147
  ]
149
148
  }
150
149
  },
151
150
  {
152
- "name": "type",
153
- "description": "A string with the type of the series.\nDefaults to `'line'` in case no type is set for the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.",
151
+ "name": "neckWidth",
152
+ "description": "The width of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area width. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
154
153
  "value": {
155
154
  "type": [
156
- "string",
157
- "null",
158
- "undefined"
155
+ "number",
156
+ "string"
159
157
  ]
160
158
  }
161
159
  },
162
160
  {
163
- "name": "title",
164
- "description": "The name of the series as shown in the legend, tooltip etc.",
161
+ "name": "stack",
162
+ "description": "Used to group series in a different stacks.\n\"stacking\" property should be specified either for each series or in plotOptions.\nIt is recommended to place series in a single stack, when they belong to the same yAxis.",
165
163
  "value": {
166
164
  "type": [
165
+ "number",
167
166
  "string"
168
167
  ]
169
168
  }
170
169
  },
171
170
  {
172
- "name": "markers",
173
- "description": "Shows/hides data-point markers for line-like series.\nAcceptable input are:\n - `shown`: markers are always visible\n - `hidden`: markers are always hidden\n - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*",
171
+ "name": "title",
172
+ "description": "The name of the series as shown in the legend, tooltip etc.",
174
173
  "value": {
175
174
  "type": [
176
- "ChartSeriesMarkers",
177
- "undefined"
175
+ "string"
178
176
  ]
179
177
  }
180
178
  },
181
179
  {
182
- "name": "unit",
183
- "description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
180
+ "name": "type",
181
+ "description": "A string with the type of the series.\nDefaults to `'line'` in case no type is set for the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.",
184
182
  "value": {
185
183
  "type": [
186
184
  "string",
@@ -190,42 +188,44 @@
190
188
  }
191
189
  },
192
190
  {
193
- "name": "stack",
194
- "description": "Used to group series in a different stacks.\n\"stacking\" property should be specified either for each series or in plotOptions.\nIt is recommended to place series in a single stack, when they belong to the same yAxis.",
191
+ "name": "unit",
192
+ "description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
195
193
  "value": {
196
194
  "type": [
197
- "number",
198
- "string"
195
+ "string",
196
+ "null",
197
+ "undefined"
199
198
  ]
200
199
  }
201
200
  },
202
201
  {
203
- "name": "neckPosition",
204
- "description": "The height of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area height. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
202
+ "name": "valueMax",
203
+ "description": "Value-axis maximum-value.\nSee the 'valueMin'",
205
204
  "value": {
206
205
  "type": [
207
206
  "number",
208
- "string"
207
+ "null",
208
+ "undefined"
209
209
  ]
210
210
  }
211
211
  },
212
212
  {
213
- "name": "neckWidth",
214
- "description": "The width of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area width. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
213
+ "name": "valueMin",
214
+ "description": "Value-axis minimum-value.\nSets the value to a series bound by 'unit' property.\nOtherwise sets the value to the first series.\nUndefined by default (determined from data).",
215
215
  "value": {
216
216
  "type": [
217
217
  "number",
218
- "string"
218
+ "null",
219
+ "undefined"
219
220
  ]
220
221
  }
221
222
  },
222
223
  {
223
- "name": "additionalOptions",
224
- "description": "Represents additional JSON configuration.",
224
+ "name": "values",
225
+ "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n - An array of numerical values `[y0, y1, y2, y3,...]`\n - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)",
225
226
  "value": {
226
227
  "type": [
227
- "SeriesOptionsType",
228
- "undefined"
228
+ "ChartSeriesValues"
229
229
  ]
230
230
  }
231
231
  }
@@ -235,7 +235,7 @@
235
235
  },
236
236
  {
237
237
  "name": "vaadin-chart",
238
- "description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n <vaadin-chart-series\n type=\"column\"\n title=\"The series title\"\n values=\"[10, 20, 30]\"\n ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha7/#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\n\n// Wait for default configuration to be ready\nrequestAnimationFrame(() => {\n const configuration = chart.configuration;\n configuration.setTitle({ text: 'The chart title' });\n // By default there is one X axis, it is referenced by configuration.xAxis[0].\n configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n configuration.addSeries({\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n });\n});\n```\n\n#### Using JS JSON API\n\nUse [`updateConfiguration`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha7/#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nchart.updateConfiguration({\n title: {\n text: 'The chart title'\n },\n subtitle: {\n text: 'Subtitle'\n },\n xAxis: {\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n },\n series: [{\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n }]\n});\n```\n\n**Note:** chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
238
+ "description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n <vaadin-chart-series\n type=\"column\"\n title=\"The series title\"\n values=\"[10, 20, 30]\"\n ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha9/#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\n\n// Wait for default configuration to be ready\nrequestAnimationFrame(() => {\n const configuration = chart.configuration;\n configuration.setTitle({ text: 'The chart title' });\n // By default there is one X axis, it is referenced by configuration.xAxis[0].\n configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n configuration.addSeries({\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n });\n});\n```\n\n#### Using JS JSON API\n\nUse [`updateConfiguration`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha9/#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nchart.updateConfiguration({\n title: {\n text: 'The chart title'\n },\n subtitle: {\n text: 'Subtitle'\n },\n xAxis: {\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n },\n series: [{\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n }]\n});\n```\n\n**Note:** chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
239
239
  "attributes": [
240
240
  {
241
241
  "name": "category-max",
@@ -270,8 +270,8 @@
270
270
  }
271
271
  },
272
272
  {
273
- "name": "no-legend",
274
- "description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
273
+ "name": "chart3d",
274
+ "description": "Specifies whether to show chart in 3 or in 2 dimensions.\nSome display angles are added by default to the \"chart.options3d\" (`{alpha: 15, beta: 15, depth: 50}`).\n3D display options can be modified via `additionalOptions`.\nThe thickness of a Pie chart can be set on `additionalOptions` through `plotOptions.pie.depth`.\n3D is supported by Bar, Column, Pie and Scatter3D charts.\nMore info available at [Highcharts](https://www.highcharts.com/docs/chart-concepts/3d-charts).",
275
275
  "value": {
276
276
  "type": [
277
277
  "boolean",
@@ -281,18 +281,17 @@
281
281
  }
282
282
  },
283
283
  {
284
- "name": "stacking",
285
- "description": "Specifies how series are stacked on top of each other.\nPossible values are null, \"normal\" or \"percent\".\nIf \"stack\" property is not defined on the vaadin-chart-series elements, then series will be put into\nthe default stack.",
284
+ "name": "empty-text",
285
+ "description": "Specifies the message displayed on a chart without displayable data.",
286
286
  "value": {
287
287
  "type": [
288
- "ChartStacking",
289
- "undefined"
288
+ "string"
290
289
  ]
291
290
  }
292
291
  },
293
292
  {
294
- "name": "timeline",
295
- "description": "Specifies whether the chart is a normal chart or a timeline chart.\nValue of this property is ignored for Gantt charts (type=\"gantt\").",
293
+ "name": "no-legend",
294
+ "description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
296
295
  "value": {
297
296
  "type": [
298
297
  "boolean",
@@ -302,49 +301,50 @@
302
301
  }
303
302
  },
304
303
  {
305
- "name": "title",
306
- "description": "Represents the title of the chart.",
304
+ "name": "polar",
305
+ "description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
307
306
  "value": {
308
307
  "type": [
309
- "string"
308
+ "boolean",
309
+ "null",
310
+ "undefined"
310
311
  ]
311
312
  }
312
313
  },
313
314
  {
314
- "name": "tooltip",
315
- "description": "Whether or not to show tooltip when hovering data points.",
315
+ "name": "stacking",
316
+ "description": "Specifies how series are stacked on top of each other.\nPossible values are null, \"normal\" or \"percent\".\nIf \"stack\" property is not defined on the vaadin-chart-series elements, then series will be put into\nthe default stack.",
316
317
  "value": {
317
318
  "type": [
318
- "boolean",
319
- "null",
319
+ "ChartStacking",
320
320
  "undefined"
321
321
  ]
322
322
  }
323
323
  },
324
324
  {
325
- "name": "type",
326
- "description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
325
+ "name": "subtitle",
326
+ "description": "Represents the subtitle of the chart.",
327
327
  "value": {
328
328
  "type": [
329
329
  "string",
330
- "null",
331
330
  "undefined"
332
331
  ]
333
332
  }
334
333
  },
335
334
  {
336
- "name": "subtitle",
337
- "description": "Represents the subtitle of the chart.",
335
+ "name": "theme",
336
+ "description": "The theme variants to apply to the component.",
338
337
  "value": {
339
338
  "type": [
340
339
  "string",
340
+ "null",
341
341
  "undefined"
342
342
  ]
343
343
  }
344
344
  },
345
345
  {
346
- "name": "chart3d",
347
- "description": "Specifies whether to show chart in 3 or in 2 dimensions.\nSome display angles are added by default to the \"chart.options3d\" (`{alpha: 15, beta: 15, depth: 50}`).\n3D display options can be modified via `additionalOptions`.\nThe thickness of a Pie chart can be set on `additionalOptions` through `plotOptions.pie.depth`.\n3D is supported by Bar, Column, Pie and Scatter3D charts.\nMore info available at [Highcharts](https://www.highcharts.com/docs/chart-concepts/3d-charts).",
346
+ "name": "timeline",
347
+ "description": "Specifies whether the chart is a normal chart or a timeline chart.\nValue of this property is ignored for Gantt charts (type=\"gantt\").",
348
348
  "value": {
349
349
  "type": [
350
350
  "boolean",
@@ -354,8 +354,8 @@
354
354
  }
355
355
  },
356
356
  {
357
- "name": "empty-text",
358
- "description": "Specifies the message displayed on a chart without displayable data.",
357
+ "name": "title",
358
+ "description": "Represents the title of the chart.",
359
359
  "value": {
360
360
  "type": [
361
361
  "string"
@@ -363,8 +363,8 @@
363
363
  }
364
364
  },
365
365
  {
366
- "name": "polar",
367
- "description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
366
+ "name": "tooltip",
367
+ "description": "Whether or not to show tooltip when hovering data points.",
368
368
  "value": {
369
369
  "type": [
370
370
  "boolean",
@@ -374,8 +374,8 @@
374
374
  }
375
375
  },
376
376
  {
377
- "name": "theme",
378
- "description": "The theme variants to apply to the component.",
377
+ "name": "type",
378
+ "description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
379
379
  "value": {
380
380
  "type": [
381
381
  "string",
@@ -388,11 +388,11 @@
388
388
  "js": {
389
389
  "properties": [
390
390
  {
391
- "name": "configuration",
392
- "description": "Configuration object that exposes the JS Api to configure the chart.\n\nMost important methods are:\n- `addSeries (Object options, [Boolean redraw], [Mixed animation])`\n- `addAxis (Object options, [Boolean isX], [Boolean redraw], [Mixed animation])`\n- `setTitle (Object title, object subtitle, Boolean redraw)`\n\nMost important properties are:\n- `configuration.series`: An array of the chart's series. Detailed API for Series object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Series)\n- `configuration.xAxis`: An array of the chart's x axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.yAxis`: An array of the chart's y axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.title`: The chart title.\n\nFor detailed documentation of available API check the [API site](http://api.highcharts.com/class-reference/classes.list)",
391
+ "name": "additionalOptions",
392
+ "description": "Represents additional JSON configuration.",
393
393
  "value": {
394
394
  "type": [
395
- "Highcharts.Chart",
395
+ "Options",
396
396
  "undefined"
397
397
  ]
398
398
  }
@@ -440,8 +440,8 @@
440
440
  }
441
441
  },
442
442
  {
443
- "name": "noLegend",
444
- "description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
443
+ "name": "chart3d",
444
+ "description": "Specifies whether to show chart in 3 or in 2 dimensions.\nSome display angles are added by default to the \"chart.options3d\" (`{alpha: 15, beta: 15, depth: 50}`).\n3D display options can be modified via `additionalOptions`.\nThe thickness of a Pie chart can be set on `additionalOptions` through `plotOptions.pie.depth`.\n3D is supported by Bar, Column, Pie and Scatter3D charts.\nMore info available at [Highcharts](https://www.highcharts.com/docs/chart-concepts/3d-charts).",
445
445
  "value": {
446
446
  "type": [
447
447
  "boolean",
@@ -451,38 +451,38 @@
451
451
  }
452
452
  },
453
453
  {
454
- "name": "stacking",
455
- "description": "Specifies how series are stacked on top of each other.\nPossible values are null, \"normal\" or \"percent\".\nIf \"stack\" property is not defined on the vaadin-chart-series elements, then series will be put into\nthe default stack.",
454
+ "name": "configuration",
455
+ "description": "Configuration object that exposes the JS Api to configure the chart.\n\nMost important methods are:\n- `addSeries (Object options, [Boolean redraw], [Mixed animation])`\n- `addAxis (Object options, [Boolean isX], [Boolean redraw], [Mixed animation])`\n- `setTitle (Object title, object subtitle, Boolean redraw)`\n\nMost important properties are:\n- `configuration.series`: An array of the chart's series. Detailed API for Series object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Series)\n- `configuration.xAxis`: An array of the chart's x axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.yAxis`: An array of the chart's y axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.title`: The chart title.\n\nFor detailed documentation of available API check the [API site](http://api.highcharts.com/class-reference/classes.list)",
456
456
  "value": {
457
457
  "type": [
458
- "ChartStacking",
458
+ "Highcharts.Chart",
459
459
  "undefined"
460
460
  ]
461
461
  }
462
462
  },
463
463
  {
464
- "name": "timeline",
465
- "description": "Specifies whether the chart is a normal chart or a timeline chart.\nValue of this property is ignored for Gantt charts (type=\"gantt\").",
464
+ "name": "emptyText",
465
+ "description": "Specifies the message displayed on a chart without displayable data.",
466
466
  "value": {
467
467
  "type": [
468
- "boolean",
469
- "null",
470
- "undefined"
468
+ "string"
471
469
  ]
472
470
  }
473
471
  },
474
472
  {
475
- "name": "title",
476
- "description": "Represents the title of the chart.",
473
+ "name": "noLegend",
474
+ "description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
477
475
  "value": {
478
476
  "type": [
479
- "string"
477
+ "boolean",
478
+ "null",
479
+ "undefined"
480
480
  ]
481
481
  }
482
482
  },
483
483
  {
484
- "name": "tooltip",
485
- "description": "Whether or not to show tooltip when hovering data points.",
484
+ "name": "polar",
485
+ "description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
486
486
  "value": {
487
487
  "type": [
488
488
  "boolean",
@@ -492,12 +492,11 @@
492
492
  }
493
493
  },
494
494
  {
495
- "name": "type",
496
- "description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
495
+ "name": "stacking",
496
+ "description": "Specifies how series are stacked on top of each other.\nPossible values are null, \"normal\" or \"percent\".\nIf \"stack\" property is not defined on the vaadin-chart-series elements, then series will be put into\nthe default stack.",
497
497
  "value": {
498
498
  "type": [
499
- "string",
500
- "null",
499
+ "ChartStacking",
501
500
  "undefined"
502
501
  ]
503
502
  }
@@ -513,8 +512,8 @@
513
512
  }
514
513
  },
515
514
  {
516
- "name": "chart3d",
517
- "description": "Specifies whether to show chart in 3 or in 2 dimensions.\nSome display angles are added by default to the \"chart.options3d\" (`{alpha: 15, beta: 15, depth: 50}`).\n3D display options can be modified via `additionalOptions`.\nThe thickness of a Pie chart can be set on `additionalOptions` through `plotOptions.pie.depth`.\n3D is supported by Bar, Column, Pie and Scatter3D charts.\nMore info available at [Highcharts](https://www.highcharts.com/docs/chart-concepts/3d-charts).",
515
+ "name": "timeline",
516
+ "description": "Specifies whether the chart is a normal chart or a timeline chart.\nValue of this property is ignored for Gantt charts (type=\"gantt\").",
518
517
  "value": {
519
518
  "type": [
520
519
  "boolean",
@@ -524,8 +523,8 @@
524
523
  }
525
524
  },
526
525
  {
527
- "name": "emptyText",
528
- "description": "Specifies the message displayed on a chart without displayable data.",
526
+ "name": "title",
527
+ "description": "Represents the title of the chart.",
529
528
  "value": {
530
529
  "type": [
531
530
  "string"
@@ -533,21 +532,22 @@
533
532
  }
534
533
  },
535
534
  {
536
- "name": "additionalOptions",
537
- "description": "Represents additional JSON configuration.",
535
+ "name": "tooltip",
536
+ "description": "Whether or not to show tooltip when hovering data points.",
538
537
  "value": {
539
538
  "type": [
540
- "Options",
539
+ "boolean",
540
+ "null",
541
541
  "undefined"
542
542
  ]
543
543
  }
544
544
  },
545
545
  {
546
- "name": "polar",
547
- "description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
546
+ "name": "type",
547
+ "description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
548
548
  "value": {
549
549
  "type": [
550
- "boolean",
550
+ "string",
551
551
  "null",
552
552
  "undefined"
553
553
  ]
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/charts",
4
- "version": "25.1.0-alpha7",
4
+ "version": "25.1.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -20,78 +20,78 @@
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
23
- "name": ".values",
24
- "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n - An array of numerical values `[y0, y1, y2, y3,...]`\n - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)",
23
+ "name": ".additionalOptions",
24
+ "description": "Represents additional JSON configuration.",
25
25
  "value": {
26
26
  "kind": "expression"
27
27
  }
28
28
  },
29
29
  {
30
- "name": ".valueMin",
31
- "description": "Value-axis minimum-value.\nSets the value to a series bound by 'unit' property.\nOtherwise sets the value to the first series.\nUndefined by default (determined from data).",
30
+ "name": ".markers",
31
+ "description": "Shows/hides data-point markers for line-like series.\nAcceptable input are:\n - `shown`: markers are always visible\n - `hidden`: markers are always hidden\n - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*",
32
32
  "value": {
33
33
  "kind": "expression"
34
34
  }
35
35
  },
36
36
  {
37
- "name": ".valueMax",
38
- "description": "Value-axis maximum-value.\nSee the 'valueMin'",
37
+ "name": ".neckPosition",
38
+ "description": "The height of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area height. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
39
39
  "value": {
40
40
  "kind": "expression"
41
41
  }
42
42
  },
43
43
  {
44
- "name": ".type",
45
- "description": "A string with the type of the series.\nDefaults to `'line'` in case no type is set for the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.",
44
+ "name": ".neckWidth",
45
+ "description": "The width of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area width. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
46
46
  "value": {
47
47
  "kind": "expression"
48
48
  }
49
49
  },
50
50
  {
51
- "name": ".title",
52
- "description": "The name of the series as shown in the legend, tooltip etc.",
51
+ "name": ".stack",
52
+ "description": "Used to group series in a different stacks.\n\"stacking\" property should be specified either for each series or in plotOptions.\nIt is recommended to place series in a single stack, when they belong to the same yAxis.",
53
53
  "value": {
54
54
  "kind": "expression"
55
55
  }
56
56
  },
57
57
  {
58
- "name": ".markers",
59
- "description": "Shows/hides data-point markers for line-like series.\nAcceptable input are:\n - `shown`: markers are always visible\n - `hidden`: markers are always hidden\n - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*",
58
+ "name": ".title",
59
+ "description": "The name of the series as shown in the legend, tooltip etc.",
60
60
  "value": {
61
61
  "kind": "expression"
62
62
  }
63
63
  },
64
64
  {
65
- "name": ".unit",
66
- "description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
65
+ "name": ".type",
66
+ "description": "A string with the type of the series.\nDefaults to `'line'` in case no type is set for the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type on `<vaadin-chart>`.",
67
67
  "value": {
68
68
  "kind": "expression"
69
69
  }
70
70
  },
71
71
  {
72
- "name": ".stack",
73
- "description": "Used to group series in a different stacks.\n\"stacking\" property should be specified either for each series or in plotOptions.\nIt is recommended to place series in a single stack, when they belong to the same yAxis.",
72
+ "name": ".unit",
73
+ "description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
74
74
  "value": {
75
75
  "kind": "expression"
76
76
  }
77
77
  },
78
78
  {
79
- "name": ".neckPosition",
80
- "description": "The height of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area height. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
79
+ "name": ".valueMax",
80
+ "description": "Value-axis maximum-value.\nSee the 'valueMin'",
81
81
  "value": {
82
82
  "kind": "expression"
83
83
  }
84
84
  },
85
85
  {
86
- "name": ".neckWidth",
87
- "description": "The width of the neck, the lower part of the funnel.\nA number defines pixel width, a percentage string defines a percentage of the plot area width. Defaults to 30%.\nNote that this property only applies for \"funnel\" charts.",
86
+ "name": ".valueMin",
87
+ "description": "Value-axis minimum-value.\nSets the value to a series bound by 'unit' property.\nOtherwise sets the value to the first series.\nUndefined by default (determined from data).",
88
88
  "value": {
89
89
  "kind": "expression"
90
90
  }
91
91
  },
92
92
  {
93
- "name": ".additionalOptions",
94
- "description": "Represents additional JSON configuration.",
93
+ "name": ".values",
94
+ "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n - An array of numerical values `[y0, y1, y2, y3,...]`\n - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)",
95
95
  "value": {
96
96
  "kind": "expression"
97
97
  }
@@ -100,47 +100,47 @@
100
100
  },
101
101
  {
102
102
  "name": "vaadin-chart",
103
- "description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n <vaadin-chart-series\n type=\"column\"\n title=\"The series title\"\n values=\"[10, 20, 30]\"\n ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha7/#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\n\n// Wait for default configuration to be ready\nrequestAnimationFrame(() => {\n const configuration = chart.configuration;\n configuration.setTitle({ text: 'The chart title' });\n // By default there is one X axis, it is referenced by configuration.xAxis[0].\n configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n configuration.addSeries({\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n });\n});\n```\n\n#### Using JS JSON API\n\nUse [`updateConfiguration`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha7/#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nchart.updateConfiguration({\n title: {\n text: 'The chart title'\n },\n subtitle: {\n text: 'Subtitle'\n },\n xAxis: {\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n },\n series: [{\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n }]\n});\n```\n\n**Note:** chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
103
+ "description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n <vaadin-chart-series\n type=\"column\"\n title=\"The series title\"\n values=\"[10, 20, 30]\"\n ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha9/#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\n\n// Wait for default configuration to be ready\nrequestAnimationFrame(() => {\n const configuration = chart.configuration;\n configuration.setTitle({ text: 'The chart title' });\n // By default there is one X axis, it is referenced by configuration.xAxis[0].\n configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n configuration.addSeries({\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n });\n});\n```\n\n#### Using JS JSON API\n\nUse [`updateConfiguration`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha9/#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nchart.updateConfiguration({\n title: {\n text: 'The chart title'\n },\n subtitle: {\n text: 'Subtitle'\n },\n xAxis: {\n categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n },\n series: [{\n type: 'column',\n data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n }]\n});\n```\n\n**Note:** chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
104
104
  "extension": true,
105
105
  "attributes": [
106
106
  {
107
- "name": "?noLegend",
108
- "description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
107
+ "name": "?chart3d",
108
+ "description": "Specifies whether to show chart in 3 or in 2 dimensions.\nSome display angles are added by default to the \"chart.options3d\" (`{alpha: 15, beta: 15, depth: 50}`).\n3D display options can be modified via `additionalOptions`.\nThe thickness of a Pie chart can be set on `additionalOptions` through `plotOptions.pie.depth`.\n3D is supported by Bar, Column, Pie and Scatter3D charts.\nMore info available at [Highcharts](https://www.highcharts.com/docs/chart-concepts/3d-charts).",
109
109
  "value": {
110
110
  "kind": "expression"
111
111
  }
112
112
  },
113
113
  {
114
- "name": "?timeline",
115
- "description": "Specifies whether the chart is a normal chart or a timeline chart.\nValue of this property is ignored for Gantt charts (type=\"gantt\").",
114
+ "name": "?noLegend",
115
+ "description": "Specifies whether to hide legend or show.\nLegend configuration can be set up via additionalOptions property",
116
116
  "value": {
117
117
  "kind": "expression"
118
118
  }
119
119
  },
120
120
  {
121
- "name": "?tooltip",
122
- "description": "Whether or not to show tooltip when hovering data points.",
121
+ "name": "?polar",
122
+ "description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
123
123
  "value": {
124
124
  "kind": "expression"
125
125
  }
126
126
  },
127
127
  {
128
- "name": "?chart3d",
129
- "description": "Specifies whether to show chart in 3 or in 2 dimensions.\nSome display angles are added by default to the \"chart.options3d\" (`{alpha: 15, beta: 15, depth: 50}`).\n3D display options can be modified via `additionalOptions`.\nThe thickness of a Pie chart can be set on `additionalOptions` through `plotOptions.pie.depth`.\n3D is supported by Bar, Column, Pie and Scatter3D charts.\nMore info available at [Highcharts](https://www.highcharts.com/docs/chart-concepts/3d-charts).",
128
+ "name": "?timeline",
129
+ "description": "Specifies whether the chart is a normal chart or a timeline chart.\nValue of this property is ignored for Gantt charts (type=\"gantt\").",
130
130
  "value": {
131
131
  "kind": "expression"
132
132
  }
133
133
  },
134
134
  {
135
- "name": "?polar",
136
- "description": "When present, cartesian charts like line, spline, area and column are transformed\ninto the polar coordinate system.",
135
+ "name": "?tooltip",
136
+ "description": "Whether or not to show tooltip when hovering data points.",
137
137
  "value": {
138
138
  "kind": "expression"
139
139
  }
140
140
  },
141
141
  {
142
- "name": ".configuration",
143
- "description": "Configuration object that exposes the JS Api to configure the chart.\n\nMost important methods are:\n- `addSeries (Object options, [Boolean redraw], [Mixed animation])`\n- `addAxis (Object options, [Boolean isX], [Boolean redraw], [Mixed animation])`\n- `setTitle (Object title, object subtitle, Boolean redraw)`\n\nMost important properties are:\n- `configuration.series`: An array of the chart's series. Detailed API for Series object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Series)\n- `configuration.xAxis`: An array of the chart's x axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.yAxis`: An array of the chart's y axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.title`: The chart title.\n\nFor detailed documentation of available API check the [API site](http://api.highcharts.com/class-reference/classes.list)",
142
+ "name": ".additionalOptions",
143
+ "description": "Represents additional JSON configuration.",
144
144
  "value": {
145
145
  "kind": "expression"
146
146
  }
@@ -174,22 +174,22 @@
174
174
  }
175
175
  },
176
176
  {
177
- "name": ".stacking",
178
- "description": "Specifies how series are stacked on top of each other.\nPossible values are null, \"normal\" or \"percent\".\nIf \"stack\" property is not defined on the vaadin-chart-series elements, then series will be put into\nthe default stack.",
177
+ "name": ".configuration",
178
+ "description": "Configuration object that exposes the JS Api to configure the chart.\n\nMost important methods are:\n- `addSeries (Object options, [Boolean redraw], [Mixed animation])`\n- `addAxis (Object options, [Boolean isX], [Boolean redraw], [Mixed animation])`\n- `setTitle (Object title, object subtitle, Boolean redraw)`\n\nMost important properties are:\n- `configuration.series`: An array of the chart's series. Detailed API for Series object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Series)\n- `configuration.xAxis`: An array of the chart's x axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.yAxis`: An array of the chart's y axes. Detailed API for Axis object is\n available in [API Site](http://api.highcharts.com/class-reference/Highcharts.Axis)\n- `configuration.title`: The chart title.\n\nFor detailed documentation of available API check the [API site](http://api.highcharts.com/class-reference/classes.list)",
179
179
  "value": {
180
180
  "kind": "expression"
181
181
  }
182
182
  },
183
183
  {
184
- "name": ".title",
185
- "description": "Represents the title of the chart.",
184
+ "name": ".emptyText",
185
+ "description": "Specifies the message displayed on a chart without displayable data.",
186
186
  "value": {
187
187
  "kind": "expression"
188
188
  }
189
189
  },
190
190
  {
191
- "name": ".type",
192
- "description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
191
+ "name": ".stacking",
192
+ "description": "Specifies how series are stacked on top of each other.\nPossible values are null, \"normal\" or \"percent\".\nIf \"stack\" property is not defined on the vaadin-chart-series elements, then series will be put into\nthe default stack.",
193
193
  "value": {
194
194
  "kind": "expression"
195
195
  }
@@ -202,15 +202,15 @@
202
202
  }
203
203
  },
204
204
  {
205
- "name": ".emptyText",
206
- "description": "Specifies the message displayed on a chart without displayable data.",
205
+ "name": ".title",
206
+ "description": "Represents the title of the chart.",
207
207
  "value": {
208
208
  "kind": "expression"
209
209
  }
210
210
  },
211
211
  {
212
- "name": ".additionalOptions",
213
- "description": "Represents additional JSON configuration.",
212
+ "name": ".type",
213
+ "description": "Sets the default series type of the chart.\nNote that `'bar'`, `'gauge'` and `'solidgauge'` should be set as default series type.",
214
214
  "value": {
215
215
  "kind": "expression"
216
216
  }