@vaadin/charts 25.3.0 → 25.3.2
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 +8 -8
- package/src/highcharts-patches.js +161 -0
- package/src/highcharts-policy.js +53 -0
- package/src/vaadin-chart-mixin.js +3 -0
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/charts",
|
|
3
|
-
"version": "25.3.
|
|
3
|
+
"version": "25.3.2",
|
|
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.3.
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "~25.3.
|
|
38
|
+
"@vaadin/component-base": "~25.3.2",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "~25.3.2",
|
|
40
40
|
"highcharts": "12.2.0",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "~25.3.
|
|
45
|
-
"@vaadin/chai-plugins": "~25.3.
|
|
46
|
-
"@vaadin/test-runner-commands": "~25.3.
|
|
44
|
+
"@vaadin/aura": "~25.3.2",
|
|
45
|
+
"@vaadin/chai-plugins": "~25.3.2",
|
|
46
|
+
"@vaadin/test-runner-commands": "~25.3.2",
|
|
47
47
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "~25.3.
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "~25.3.2",
|
|
49
49
|
"sinon": "^22.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": "
|
|
57
|
+
"gitHead": "3f75254a3f77da3977cb79a77f549f37b8a5d54e"
|
|
58
58
|
}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2000 - 2026 Vaadin Ltd.
|
|
4
|
+
*
|
|
5
|
+
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
+
*
|
|
7
|
+
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
8
|
+
* license.
|
|
9
|
+
*/
|
|
10
|
+
import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
|
|
11
|
+
import { getHighchartsPolicy, releasePolicyFactory } from './highcharts-policy.js';
|
|
12
|
+
|
|
13
|
+
// TODO: Remove when upgrading Highcharts, see vaadin/web-components#12213
|
|
14
|
+
|
|
15
|
+
releasePolicyFactory();
|
|
16
|
+
|
|
17
|
+
const { AST, Chart, Point, SVGElement } = Highcharts;
|
|
18
|
+
|
|
19
|
+
const RESERVED_KEYS = ['__proto__', 'constructor'];
|
|
20
|
+
|
|
21
|
+
const isReservedKey = (key) => RESERVED_KEYS.includes(key);
|
|
22
|
+
|
|
23
|
+
const isAllowedReference = (value) =>
|
|
24
|
+
typeof value === 'string' && AST.allowedReferences.some((ref) => value.startsWith(ref));
|
|
25
|
+
|
|
26
|
+
const UNSUPPORTED_SCHEMES = ['javascript', 'vbscript', 'data'];
|
|
27
|
+
|
|
28
|
+
const isUnsupportedLink = (value) => {
|
|
29
|
+
if (typeof value !== 'string') {
|
|
30
|
+
return true;
|
|
31
|
+
}
|
|
32
|
+
try {
|
|
33
|
+
// The URL parser normalizes case and whitespace the same way as navigation does
|
|
34
|
+
return UNSUPPORTED_SCHEMES.includes(new URL(value, document.baseURI).protocol.slice(0, -1));
|
|
35
|
+
} catch (_) {
|
|
36
|
+
return true;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
/* eslint-disable @typescript-eslint/no-invalid-this, prefer-arrow-callback */
|
|
41
|
+
|
|
42
|
+
// Skip reserved option names in point objects
|
|
43
|
+
Highcharts.wrap(Point.prototype, 'optionsToObject', function (proceed, options) {
|
|
44
|
+
if (
|
|
45
|
+
options &&
|
|
46
|
+
typeof options === 'object' &&
|
|
47
|
+
!Array.isArray(options) &&
|
|
48
|
+
RESERVED_KEYS.some((key) => Object.hasOwn(options, key))
|
|
49
|
+
) {
|
|
50
|
+
options = Object.fromEntries(Object.entries(options).filter(([key]) => !isReservedKey(key)));
|
|
51
|
+
}
|
|
52
|
+
return proceed.call(this, options);
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
// Skip reserved path segments in point keys
|
|
56
|
+
Highcharts.wrap(Point.prototype, 'setNestedProperty', function (proceed, object, value, key) {
|
|
57
|
+
if (String(key).split('.').some(isReservedKey)) {
|
|
58
|
+
return object;
|
|
59
|
+
}
|
|
60
|
+
return proceed.call(this, object, value, key);
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
// Ignore credits links that use an unsupported URL scheme
|
|
64
|
+
Highcharts.wrap(Chart.prototype, 'addCredits', function (proceed, credits) {
|
|
65
|
+
const options = Highcharts.merge(true, this.options.credits, credits);
|
|
66
|
+
if (options?.href && isUnsupportedLink(options.href)) {
|
|
67
|
+
Highcharts.error(33, false, this, { 'Invalid attribute in config': 'credits.href' });
|
|
68
|
+
delete options.href;
|
|
69
|
+
}
|
|
70
|
+
return proceed.call(this, options);
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
// Ignore event attribute names, e.g. from style options that are applied as attributes.
|
|
74
|
+
// Not using `Highcharts.wrap`, as this setter runs for most attributes on every render.
|
|
75
|
+
const defaultSetter = SVGElement.prototype._defaultSetter;
|
|
76
|
+
SVGElement.prototype._defaultSetter = function (value, key, element) {
|
|
77
|
+
if (!/^on/iu.test(key)) {
|
|
78
|
+
defaultSetter.call(this, value, key, element);
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// Remove unsupported xlink:href values from text markup
|
|
83
|
+
Highcharts.wrap(AST, 'filterUserAttributes', function (proceed, attributes) {
|
|
84
|
+
if (attributes && Object.hasOwn(attributes, 'xlink:href') && !isAllowedReference(attributes['xlink:href'])) {
|
|
85
|
+
delete attributes['xlink:href'];
|
|
86
|
+
}
|
|
87
|
+
return proceed.call(this, attributes);
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
/* eslint-enable @typescript-eslint/no-invalid-this, prefer-arrow-callback */
|
|
91
|
+
|
|
92
|
+
function parseDocument(markup) {
|
|
93
|
+
const policy = getHighchartsPolicy();
|
|
94
|
+
if (policy) {
|
|
95
|
+
try {
|
|
96
|
+
return new DOMParser().parseFromString(policy.createHTML(markup), 'text/html');
|
|
97
|
+
} catch (_) {
|
|
98
|
+
// Fall through
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
try {
|
|
103
|
+
return new DOMParser().parseFromString(markup, 'text/html');
|
|
104
|
+
} catch (_) {
|
|
105
|
+
// Fall through
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Parse in an inert document, so that nothing in the markup runs before it is filtered
|
|
109
|
+
const doc = document.implementation.createHTMLDocument('');
|
|
110
|
+
try {
|
|
111
|
+
doc.body.innerHTML = policy ? policy.createHTML(markup) : markup;
|
|
112
|
+
} catch (_) {
|
|
113
|
+
// Leave the document empty
|
|
114
|
+
}
|
|
115
|
+
return doc;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
function toNode(domNode, nodes) {
|
|
119
|
+
const tagName = domNode.nodeName.toLowerCase();
|
|
120
|
+
const node = { tagName };
|
|
121
|
+
|
|
122
|
+
if (tagName === '#text') {
|
|
123
|
+
node.textContent = domNode.textContent || '';
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
if (domNode.attributes) {
|
|
127
|
+
const attributes = {};
|
|
128
|
+
[...domNode.attributes].forEach((attribute) => {
|
|
129
|
+
if (attribute.name === 'data-style') {
|
|
130
|
+
node.style = AST.parseStyle(attribute.value);
|
|
131
|
+
} else {
|
|
132
|
+
attributes[attribute.name] = attribute.value;
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
node.attributes = attributes;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
if (domNode.childNodes.length) {
|
|
139
|
+
const children = [];
|
|
140
|
+
domNode.childNodes.forEach((child) => toNode(child, children));
|
|
141
|
+
if (children.length) {
|
|
142
|
+
node.children = children;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
nodes.push(node);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
// Parse text markup in an inert document when the default parser fails
|
|
150
|
+
AST.prototype.parseMarkup = function (markup) {
|
|
151
|
+
const doc = parseDocument(
|
|
152
|
+
markup
|
|
153
|
+
.trim()
|
|
154
|
+
// The style attribute causes a warning when parsing with CSP enabled, so use an alias
|
|
155
|
+
.replace(/ style=(["'])/gu, ' data-style=$1'),
|
|
156
|
+
);
|
|
157
|
+
|
|
158
|
+
const nodes = [];
|
|
159
|
+
doc.body.childNodes.forEach((child) => toNode(child, nodes));
|
|
160
|
+
return nodes;
|
|
161
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2000 - 2026 Vaadin Ltd.
|
|
4
|
+
*
|
|
5
|
+
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
+
*
|
|
7
|
+
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
8
|
+
* license.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
// Keeps a reference to the Trusted Types policy that Highcharts creates when it loads, so that
|
|
12
|
+
// `highcharts-patches.js` can reuse it. Must be imported before Highcharts.
|
|
13
|
+
const { trustedTypes } = window;
|
|
14
|
+
|
|
15
|
+
let policy;
|
|
16
|
+
let createPolicy;
|
|
17
|
+
let hasOwnCreatePolicy = false;
|
|
18
|
+
|
|
19
|
+
if (trustedTypes && typeof trustedTypes.createPolicy === 'function') {
|
|
20
|
+
createPolicy = trustedTypes.createPolicy;
|
|
21
|
+
// A polyfill or another library can define the method on the object itself
|
|
22
|
+
hasOwnCreatePolicy = Object.hasOwn(trustedTypes, 'createPolicy');
|
|
23
|
+
trustedTypes.createPolicy = function (name, rules) {
|
|
24
|
+
const result = createPolicy.call(this, name, rules);
|
|
25
|
+
if (name === 'highcharts' && !policy) {
|
|
26
|
+
policy = result;
|
|
27
|
+
}
|
|
28
|
+
return result;
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Stops listening for new policies. Must be called after Highcharts has loaded.
|
|
34
|
+
*/
|
|
35
|
+
export function releasePolicyFactory() {
|
|
36
|
+
if (!createPolicy) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
if (hasOwnCreatePolicy) {
|
|
40
|
+
trustedTypes.createPolicy = createPolicy;
|
|
41
|
+
} else {
|
|
42
|
+
// `delete` restores the inherited TrustedTypePolicyFactory.prototype.createPolicy method.
|
|
43
|
+
delete trustedTypes.createPolicy;
|
|
44
|
+
}
|
|
45
|
+
createPolicy = undefined;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Returns the Trusted Types policy created by Highcharts, if any.
|
|
50
|
+
*/
|
|
51
|
+
export function getHighchartsPolicy() {
|
|
52
|
+
return policy;
|
|
53
|
+
}
|
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
8
8
|
* license.
|
|
9
9
|
*/
|
|
10
|
+
// Must be imported before Highcharts, see highcharts-policy.js
|
|
11
|
+
import './highcharts-policy.js';
|
|
10
12
|
import 'highcharts/es-modules/masters/highstock.src.js';
|
|
11
13
|
import 'highcharts/es-modules/masters/modules/accessibility.src.js';
|
|
12
14
|
import 'highcharts/es-modules/masters/modules/annotations.src.js';
|
|
@@ -27,6 +29,7 @@ import 'highcharts/es-modules/masters/modules/xrange.src.js';
|
|
|
27
29
|
import 'highcharts/es-modules/masters/modules/bullet.src.js';
|
|
28
30
|
import 'highcharts/es-modules/masters/modules/gantt.src.js';
|
|
29
31
|
import 'highcharts/es-modules/masters/modules/draggable-points.src.js';
|
|
32
|
+
import './highcharts-patches.js';
|
|
30
33
|
import KeyboardNavigation from 'highcharts/es-modules/Accessibility/KeyboardNavigation.js';
|
|
31
34
|
import Pointer from 'highcharts/es-modules/Core/Pointer.js';
|
|
32
35
|
import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
|
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.3.
|
|
4
|
+
"version": "25.3.2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
},
|
|
207
207
|
{
|
|
208
208
|
"name": "vaadin-chart",
|
|
209
|
-
"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.3.
|
|
209
|
+
"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.3.2/#/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.3.2/#/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.",
|
|
210
210
|
"attributes": [
|
|
211
211
|
{
|
|
212
212
|
"name": "category-max",
|
package/web-types.lit.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.3.
|
|
4
|
+
"version": "25.3.2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -100,7 +100,7 @@
|
|
|
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.3.
|
|
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.3.2/#/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.3.2/#/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
|
{
|