@vaadin/charts 25.3.0-dev.3a3c2d7d2a → 25.3.0-rc1
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/custom-elements.json +36 -29
- package/package.json +8 -8
- package/src/helpers.js +5 -20
- package/src/styles/vaadin-chart-base-styles.js +57 -34
- package/src/vaadin-chart-mixin.js +94 -73
- package/src/vaadin-chart-series-mixin.js +1 -1
- package/src/vaadin-chart.js +1 -0
- package/web-types.json +3 -16
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -1535,34 +1535,6 @@
|
|
|
1535
1535
|
"name": "yaxes-extremes-set"
|
|
1536
1536
|
}
|
|
1537
1537
|
],
|
|
1538
|
-
"mixins": [
|
|
1539
|
-
{
|
|
1540
|
-
"name": "ChartMixin",
|
|
1541
|
-
"module": "src/vaadin-chart-mixin.js"
|
|
1542
|
-
},
|
|
1543
|
-
{
|
|
1544
|
-
"name": "ThemableMixin",
|
|
1545
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1546
|
-
},
|
|
1547
|
-
{
|
|
1548
|
-
"name": "ElementMixin",
|
|
1549
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1550
|
-
},
|
|
1551
|
-
{
|
|
1552
|
-
"name": "PolylitMixin",
|
|
1553
|
-
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1554
|
-
},
|
|
1555
|
-
{
|
|
1556
|
-
"name": "LumoInjectionMixin",
|
|
1557
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1558
|
-
}
|
|
1559
|
-
],
|
|
1560
|
-
"superclass": {
|
|
1561
|
-
"name": "LitElement",
|
|
1562
|
-
"package": "lit"
|
|
1563
|
-
},
|
|
1564
|
-
"tagName": "vaadin-chart",
|
|
1565
|
-
"customElement": true,
|
|
1566
1538
|
"attributes": [
|
|
1567
1539
|
{
|
|
1568
1540
|
"name": "additional-options",
|
|
@@ -1708,6 +1680,13 @@
|
|
|
1708
1680
|
"module": "src/vaadin-chart-mixin.js"
|
|
1709
1681
|
}
|
|
1710
1682
|
},
|
|
1683
|
+
{
|
|
1684
|
+
"type": {
|
|
1685
|
+
"text": "string"
|
|
1686
|
+
},
|
|
1687
|
+
"description": "The theme variants to apply to the component.",
|
|
1688
|
+
"name": "theme"
|
|
1689
|
+
},
|
|
1711
1690
|
{
|
|
1712
1691
|
"name": "timeline",
|
|
1713
1692
|
"type": {
|
|
@@ -1756,7 +1735,35 @@
|
|
|
1756
1735
|
"module": "src/vaadin-chart-mixin.js"
|
|
1757
1736
|
}
|
|
1758
1737
|
}
|
|
1759
|
-
]
|
|
1738
|
+
],
|
|
1739
|
+
"mixins": [
|
|
1740
|
+
{
|
|
1741
|
+
"name": "ChartMixin",
|
|
1742
|
+
"module": "src/vaadin-chart-mixin.js"
|
|
1743
|
+
},
|
|
1744
|
+
{
|
|
1745
|
+
"name": "ThemableMixin",
|
|
1746
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1747
|
+
},
|
|
1748
|
+
{
|
|
1749
|
+
"name": "ElementMixin",
|
|
1750
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1751
|
+
},
|
|
1752
|
+
{
|
|
1753
|
+
"name": "PolylitMixin",
|
|
1754
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1755
|
+
},
|
|
1756
|
+
{
|
|
1757
|
+
"name": "LumoInjectionMixin",
|
|
1758
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1759
|
+
}
|
|
1760
|
+
],
|
|
1761
|
+
"superclass": {
|
|
1762
|
+
"name": "LitElement",
|
|
1763
|
+
"package": "lit"
|
|
1764
|
+
},
|
|
1765
|
+
"tagName": "vaadin-chart",
|
|
1766
|
+
"customElement": true
|
|
1760
1767
|
}
|
|
1761
1768
|
],
|
|
1762
1769
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/charts",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-rc1",
|
|
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.0-
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/component-base": "25.3.0-rc1",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
|
|
40
40
|
"highcharts": "12.2.0",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "25.3.0-
|
|
45
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
46
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
44
|
+
"@vaadin/aura": "25.3.0-rc1",
|
|
45
|
+
"@vaadin/chai-plugins": "25.3.0-rc1",
|
|
46
|
+
"@vaadin/test-runner-commands": "25.3.0-rc1",
|
|
47
47
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
|
|
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": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
|
|
58
58
|
}
|
package/src/helpers.js
CHANGED
|
@@ -9,6 +9,11 @@
|
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated Import `deepMerge` from `@vaadin/component-base/src/object-utils.js` instead.
|
|
14
|
+
*/
|
|
15
|
+
export { deepMerge } from '@vaadin/component-base/src/object-utils.js';
|
|
16
|
+
|
|
12
17
|
export function inflateFunctions(config) {
|
|
13
18
|
if (Array.isArray(config)) {
|
|
14
19
|
config.forEach(inflateFunctions);
|
|
@@ -38,26 +43,6 @@ export function inflateFunctions(config) {
|
|
|
38
43
|
});
|
|
39
44
|
}
|
|
40
45
|
|
|
41
|
-
export function deepMerge(target, source) {
|
|
42
|
-
const isObject = (item) => item && typeof item === 'object' && !Array.isArray(item);
|
|
43
|
-
|
|
44
|
-
if (isObject(source) && isObject(target)) {
|
|
45
|
-
Object.keys(source).forEach((key) => {
|
|
46
|
-
if (isObject(source[key])) {
|
|
47
|
-
if (!target[key]) {
|
|
48
|
-
Object.assign(target, { [key]: {} });
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
deepMerge(target[key], source[key]);
|
|
52
|
-
} else {
|
|
53
|
-
Object.assign(target, { [key]: source[key] });
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
return target;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
46
|
export function prepareExport(chart) {
|
|
62
47
|
// Guard against another print 'before print' event coming before
|
|
63
48
|
// the 'after print' event.
|
|
@@ -21,9 +21,32 @@ import '@vaadin/component-base/src/styles/user-colors.js';
|
|
|
21
21
|
import { css, unsafeCSS } from 'lit';
|
|
22
22
|
import { addGlobalStyles } from '@vaadin/component-base/src/css-utils.js';
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
const seriesColorTokens = Array.from(
|
|
25
|
+
{ length: 10 },
|
|
26
|
+
(_, i) =>
|
|
27
|
+
`--_color-${i}: var(--highcharts-color-${i}, var(--vaadin-charts-color-${i}, var(--vaadin-user-color-${i})));`,
|
|
28
|
+
).join('\n ');
|
|
29
|
+
|
|
30
|
+
// A non-split tooltip carries highcharts-color-N on the tooltip element itself,
|
|
31
|
+
// a split one on its child boxes, so both selectors are needed.
|
|
32
|
+
const seriesColorRules = Array.from(
|
|
33
|
+
{ length: 10 },
|
|
34
|
+
(_, i) =>
|
|
35
|
+
`.highcharts-tooltip-container .highcharts-tooltip.highcharts-color-${i},
|
|
36
|
+
.highcharts-tooltip-container .highcharts-tooltip .highcharts-color-${i} { fill: var(--_color-${i}); stroke: var(--_color-${i}); }`,
|
|
37
|
+
).join('\n');
|
|
38
|
+
|
|
39
|
+
/* Emitted at both scopes, so it looks absent from upstream Highcharts. Do not prune. */
|
|
25
40
|
// postcss-lit-disable-next-line
|
|
26
41
|
const tooltipStyles = (scope) => css`
|
|
42
|
+
${unsafeCSS(scope)} .highcharts-strong {
|
|
43
|
+
font-weight: bold;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
${unsafeCSS(scope)} .highcharts-emphasized {
|
|
47
|
+
font-style: italic;
|
|
48
|
+
}
|
|
49
|
+
|
|
27
50
|
${unsafeCSS(scope)} .highcharts-tooltip {
|
|
28
51
|
cursor: default;
|
|
29
52
|
pointer-events: none;
|
|
@@ -32,9 +55,17 @@ const tooltipStyles = (scope) => css`
|
|
|
32
55
|
filter: drop-shadow(var(--vaadin-charts-tooltip-shadow, 0 4px 8px rgba(0, 0, 0, 0.2))) !important;
|
|
33
56
|
}
|
|
34
57
|
|
|
58
|
+
/* Marked by the mixin for stickOnContact, which Highcharts itself only honours
|
|
59
|
+
outside styled mode. See highcharts/highcharts#25310. */
|
|
60
|
+
${unsafeCSS(scope)} .highcharts-tooltip.vaadin-chart-sticky-tooltip {
|
|
61
|
+
pointer-events: auto;
|
|
62
|
+
}
|
|
63
|
+
|
|
35
64
|
${unsafeCSS(scope)} .highcharts-tooltip text,
|
|
36
65
|
${unsafeCSS(scope)} .highcharts-tooltip foreignObject span {
|
|
37
66
|
fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-data-label, var(--vaadin-text-color)));
|
|
67
|
+
/* The tooltip carries the series color, and stroke inherits into the glyphs. */
|
|
68
|
+
stroke-width: 0;
|
|
38
69
|
}
|
|
39
70
|
|
|
40
71
|
${unsafeCSS(scope)} .highcharts-tooltip .highcharts-tracker {
|
|
@@ -65,6 +96,12 @@ const tooltipStyles = (scope) => css`
|
|
|
65
96
|
addGlobalStyles(
|
|
66
97
|
'vaadin-charts-tooltip',
|
|
67
98
|
css`
|
|
99
|
+
.highcharts-tooltip-container {
|
|
100
|
+
${unsafeCSS(seriesColorTokens)}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
${unsafeCSS(seriesColorRules)}
|
|
104
|
+
|
|
68
105
|
.highcharts-tooltip-container .highcharts-root {
|
|
69
106
|
overflow: visible;
|
|
70
107
|
font-size: var(--vaadin-charts-font-size, 0.75rem);
|
|
@@ -87,20 +124,13 @@ export const chartStyles = css`
|
|
|
87
124
|
font-size: var(--vaadin-charts-font-size, 0.75rem);
|
|
88
125
|
line-height: normal;
|
|
89
126
|
|
|
90
|
-
/* Needs to be a color, not a background image */
|
|
127
|
+
/* Needs to be a color, not a background image. A theme may set it to transparent. */
|
|
91
128
|
--_bg: var(--vaadin-charts-background, var(--vaadin-background-color));
|
|
129
|
+
/* What elements drawn on the canvas read against. A transparent canvas has to
|
|
130
|
+
declare what shows through instead. */
|
|
131
|
+
--_surface: var(--vaadin-charts-surface, var(--_bg));
|
|
92
132
|
|
|
93
|
-
|
|
94
|
-
--_color-1: var(--highcharts-color-1, var(--vaadin-charts-color-1, var(--vaadin-user-color-1)));
|
|
95
|
-
--_color-2: var(--highcharts-color-2, var(--vaadin-charts-color-2, var(--vaadin-user-color-2)));
|
|
96
|
-
--_color-3: var(--highcharts-color-3, var(--vaadin-charts-color-3, var(--vaadin-user-color-3)));
|
|
97
|
-
--_color-4: var(--highcharts-color-4, var(--vaadin-charts-color-4, var(--vaadin-user-color-4)));
|
|
98
|
-
--_color-5: var(--highcharts-color-5, var(--vaadin-charts-color-5, var(--vaadin-user-color-5)));
|
|
99
|
-
--_color-6: var(--highcharts-color-6, var(--vaadin-charts-color-6, var(--vaadin-user-color-6)));
|
|
100
|
-
--_color-7: var(--highcharts-color-7, var(--vaadin-charts-color-7, var(--vaadin-user-color-7)));
|
|
101
|
-
--_color-8: var(--highcharts-color-8, var(--vaadin-charts-color-8, var(--vaadin-user-color-8)));
|
|
102
|
-
--_color-9: var(--highcharts-color-9, var(--vaadin-charts-color-9, var(--vaadin-user-color-9)));
|
|
103
|
-
|
|
133
|
+
${unsafeCSS(seriesColorTokens)}
|
|
104
134
|
--_color-0-label: oklch(from var(--_color-0) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
105
135
|
--_color-1-label: oklch(from var(--_color-1) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
106
136
|
--_color-2-label: oklch(from var(--_color-2) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
@@ -118,7 +148,7 @@ export const chartStyles = css`
|
|
|
118
148
|
--_label: var(--vaadin-charts-label, var(--vaadin-text-color));
|
|
119
149
|
--_secondary-label: var(--vaadin-charts-secondary-label, var(--vaadin-text-color-secondary));
|
|
120
150
|
--_disabled-label: var(--vaadin-charts-disabled-label, var(--vaadin-text-color-disabled));
|
|
121
|
-
--_point-border: var(--vaadin-charts-point-border, var(--
|
|
151
|
+
--_point-border: var(--vaadin-charts-point-border, var(--_surface));
|
|
122
152
|
--_axis-line: var(--vaadin-charts-axis-line, var(--vaadin-border-color-secondary));
|
|
123
153
|
--_axis-title: var(--vaadin-charts-axis-title, var(--_secondary-label));
|
|
124
154
|
--_axis-label: var(--vaadin-charts-axis-label, var(--_secondary-label));
|
|
@@ -168,14 +198,6 @@ export const chartStyles = css`
|
|
|
168
198
|
stroke-width: 0;
|
|
169
199
|
}
|
|
170
200
|
|
|
171
|
-
:where([styled-mode]) .highcharts-strong {
|
|
172
|
-
font-weight: bold;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
:where([styled-mode]) .highcharts-emphasized {
|
|
176
|
-
font-style: italic;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
201
|
:where([styled-mode]) .highcharts-anchor {
|
|
180
202
|
cursor: pointer;
|
|
181
203
|
}
|
|
@@ -478,7 +500,7 @@ export const chartStyles = css`
|
|
|
478
500
|
|
|
479
501
|
:where([styled-mode]) .highcharts-markers {
|
|
480
502
|
stroke-width: 1px;
|
|
481
|
-
stroke: var(--highcharts-background-color, var(--
|
|
503
|
+
stroke: var(--highcharts-background-color, var(--_surface));
|
|
482
504
|
}
|
|
483
505
|
|
|
484
506
|
:where([styled-mode])
|
|
@@ -717,7 +739,7 @@ export const chartStyles = css`
|
|
|
717
739
|
/* Loading */
|
|
718
740
|
:where([styled-mode]) .highcharts-loading {
|
|
719
741
|
position: absolute;
|
|
720
|
-
background-color: var(--highcharts-background-color, var(--
|
|
742
|
+
background-color: var(--highcharts-background-color, var(--_surface));
|
|
721
743
|
opacity: 0.5;
|
|
722
744
|
text-align: center;
|
|
723
745
|
z-index: 10;
|
|
@@ -761,7 +783,7 @@ export const chartStyles = css`
|
|
|
761
783
|
|
|
762
784
|
/* Highcharts More and modules */
|
|
763
785
|
:where([styled-mode]) .highcharts-boxplot-box {
|
|
764
|
-
fill: var(--highcharts-background-color, var(--
|
|
786
|
+
fill: var(--highcharts-background-color, var(--_surface));
|
|
765
787
|
}
|
|
766
788
|
|
|
767
789
|
:where([styled-mode]) .highcharts-boxplot-median {
|
|
@@ -856,7 +878,7 @@ export const chartStyles = css`
|
|
|
856
878
|
|
|
857
879
|
:where([styled-mode]) .highcharts-navigator-handle {
|
|
858
880
|
stroke: var(--highcharts-neutral-color-40, var(--_grid-line));
|
|
859
|
-
fill: var(--highcharts-neutral-color-5, var(--
|
|
881
|
+
fill: var(--highcharts-neutral-color-5, var(--_surface));
|
|
860
882
|
cursor: ew-resize;
|
|
861
883
|
}
|
|
862
884
|
|
|
@@ -900,7 +922,7 @@ export const chartStyles = css`
|
|
|
900
922
|
}
|
|
901
923
|
|
|
902
924
|
:where([styled-mode]) .highcharts-scrollbar-button {
|
|
903
|
-
fill: var(--highcharts-neutral-color-10, var(--
|
|
925
|
+
fill: var(--highcharts-neutral-color-10, var(--_surface));
|
|
904
926
|
stroke: var(--highcharts-neutral-color-20);
|
|
905
927
|
stroke-width: 1px;
|
|
906
928
|
}
|
|
@@ -946,6 +968,7 @@ export const chartStyles = css`
|
|
|
946
968
|
fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-button-label, var(--_label)));
|
|
947
969
|
}
|
|
948
970
|
|
|
971
|
+
/* Inverts like vaadin-button[theme~='primary']. Lumo and Aura override both. */
|
|
949
972
|
:where([styled-mode]) .highcharts-button-pressed {
|
|
950
973
|
font-weight: bold;
|
|
951
974
|
fill: var(--highcharts-highlight-color-10, var(--vaadin-charts-button-active-background, var(--_label)));
|
|
@@ -953,7 +976,7 @@ export const chartStyles = css`
|
|
|
953
976
|
}
|
|
954
977
|
|
|
955
978
|
:where([styled-mode]) .highcharts-button-pressed text {
|
|
956
|
-
fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-button-active-label, var(--
|
|
979
|
+
fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-button-active-label, var(--_surface)));
|
|
957
980
|
font-weight: bold;
|
|
958
981
|
}
|
|
959
982
|
|
|
@@ -1006,7 +1029,7 @@ export const chartStyles = css`
|
|
|
1006
1029
|
}
|
|
1007
1030
|
|
|
1008
1031
|
:where([styled-mode]) .highcharts-crosshair-label text {
|
|
1009
|
-
fill: var(--highcharts-background-color, var(--
|
|
1032
|
+
fill: var(--highcharts-background-color, var(--_surface));
|
|
1010
1033
|
font-size: 0.9em;
|
|
1011
1034
|
}
|
|
1012
1035
|
|
|
@@ -1046,7 +1069,7 @@ export const chartStyles = css`
|
|
|
1046
1069
|
|
|
1047
1070
|
:where([styled-mode]) .highcharts-flags-series .highcharts-point .highcharts-label-box {
|
|
1048
1071
|
stroke: var(--highcharts-neutral-color-40, var(--_grid-line));
|
|
1049
|
-
fill: var(--highcharts-background-color, var(--
|
|
1072
|
+
fill: var(--highcharts-background-color, var(--_surface));
|
|
1050
1073
|
transition: fill 250ms;
|
|
1051
1074
|
}
|
|
1052
1075
|
|
|
@@ -1055,7 +1078,7 @@ export const chartStyles = css`
|
|
|
1055
1078
|
--highcharts-neutral-color-100,
|
|
1056
1079
|
color-mix(in srgb, var(--vaadin-charts-contrast, var(--_label)) 60%, transparent)
|
|
1057
1080
|
);
|
|
1058
|
-
fill: var(--highcharts-highlight-color-20, var(--
|
|
1081
|
+
fill: var(--highcharts-highlight-color-20, var(--_surface));
|
|
1059
1082
|
}
|
|
1060
1083
|
|
|
1061
1084
|
:where([styled-mode]) .highcharts-flags-series .highcharts-point text {
|
|
@@ -1134,7 +1157,7 @@ export const chartStyles = css`
|
|
|
1134
1157
|
/* Exporting module */
|
|
1135
1158
|
:where([styled-mode]) .highcharts-contextbutton {
|
|
1136
1159
|
/* Fill is needed to capture hover */
|
|
1137
|
-
fill: var(--highcharts-background-color, var(--
|
|
1160
|
+
fill: var(--highcharts-background-color, var(--_surface));
|
|
1138
1161
|
stroke: none;
|
|
1139
1162
|
stroke-linecap: round;
|
|
1140
1163
|
}
|
|
@@ -1151,7 +1174,7 @@ export const chartStyles = css`
|
|
|
1151
1174
|
|
|
1152
1175
|
:where([styled-mode]) .highcharts-menu {
|
|
1153
1176
|
border: none;
|
|
1154
|
-
background: var(--highcharts-background-color, var(--
|
|
1177
|
+
background: var(--highcharts-background-color, var(--_surface));
|
|
1155
1178
|
border-radius: 3px;
|
|
1156
1179
|
padding: 0.5em;
|
|
1157
1180
|
box-shadow: 3px 3px 10px #888;
|
|
@@ -1171,7 +1194,7 @@ export const chartStyles = css`
|
|
|
1171
1194
|
}
|
|
1172
1195
|
|
|
1173
1196
|
:where([styled-mode]) .highcharts-menu-item:hover {
|
|
1174
|
-
background: var(--highcharts-neutral-color-5, var(--
|
|
1197
|
+
background: var(--highcharts-neutral-color-5, var(--_surface));
|
|
1175
1198
|
}
|
|
1176
1199
|
|
|
1177
1200
|
/* Breadcrumbs */
|
|
@@ -28,75 +28,50 @@ import 'highcharts/es-modules/masters/modules/bullet.src.js';
|
|
|
28
28
|
import 'highcharts/es-modules/masters/modules/gantt.src.js';
|
|
29
29
|
import 'highcharts/es-modules/masters/modules/draggable-points.src.js';
|
|
30
30
|
import KeyboardNavigation from 'highcharts/es-modules/Accessibility/KeyboardNavigation.js';
|
|
31
|
-
import HTMLUtilities from 'highcharts/es-modules/Accessibility/Utils/HTMLUtilities.js';
|
|
32
31
|
import Pointer from 'highcharts/es-modules/Core/Pointer.js';
|
|
33
32
|
import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
|
|
33
|
+
import { deepMerge } from '@vaadin/component-base/src/object-utils.js';
|
|
34
34
|
import { get } from '@vaadin/component-base/src/path-utils.js';
|
|
35
35
|
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
|
|
36
36
|
import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
|
|
37
|
-
import { cleanupExport,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
37
|
+
import { cleanupExport, inflateFunctions, prepareExport } from './helpers.js';
|
|
38
|
+
|
|
39
|
+
// Highcharts moves a copy of the chart into the document body when exporting, losing the styles
|
|
40
|
+
// defined in the shadow root. The `beforeExport` and `afterExport` events copy them over for the
|
|
41
|
+
// duration of the export. Wrapping `getSVG` covers every export path, as both `exportChart` and
|
|
42
|
+
// `exportChartLocal` call it through `getSVGForExport`.
|
|
43
|
+
// Workaround for https://github.com/vaadin/vaadin-charts/issues/389
|
|
44
|
+
/* eslint-disable @typescript-eslint/no-invalid-this, prefer-arrow-callback */
|
|
45
|
+
Highcharts.wrap(Highcharts.Chart.prototype, 'getSVG', function (proceed, ...args) {
|
|
46
|
+
Highcharts.fireEvent(this, 'beforeExport');
|
|
47
|
+
const result = proceed.apply(this, args);
|
|
48
|
+
Highcharts.fireEvent(this, 'afterExport');
|
|
49
|
+
return result;
|
|
48
50
|
});
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
//
|
|
52
|
-
//
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
if (
|
|
60
|
-
chartPosition &&
|
|
61
|
-
(!tooltip || !tooltip.isSticky) &&
|
|
62
|
-
!chart.isInsidePlot(pEvt.chartX - chart.plotLeft, pEvt.chartY - chart.plotTop, {
|
|
63
|
-
visiblePlotOnly: true,
|
|
64
|
-
}) &&
|
|
65
|
-
// Use the first element from the composed path instead of the actual target
|
|
66
|
-
!this.inClass(pEvt.composedPath()[0], 'highcharts-tracker')
|
|
67
|
-
) {
|
|
68
|
-
this.reset();
|
|
51
|
+
/* eslint-enable @typescript-eslint/no-invalid-this, prefer-arrow-callback */
|
|
52
|
+
|
|
53
|
+
// Document-level handlers see <vaadin-chart> as the target inside a shadow root, so retarget
|
|
54
|
+
// to the composed path. Remove when fixed: vaadin/web-components#7107 (onDocumentMouseMove)
|
|
55
|
+
// and highcharts/highcharts#23490 (onMouseUp).
|
|
56
|
+
/* eslint-disable @typescript-eslint/no-invalid-this */
|
|
57
|
+
function withComposedTarget(proceed, e, ...args) {
|
|
58
|
+
// Only a shadow host can be a retargeted event target.
|
|
59
|
+
if (!e.target?.shadowRoot) {
|
|
60
|
+
return proceed.call(this, e, ...args);
|
|
69
61
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
// Workaround for https://github.com/highcharts/highcharts/issues/23490
|
|
78
|
-
//
|
|
79
|
-
// TODO: Remove this monkeypatch once the referenced issue is fixed
|
|
80
|
-
const { simulatedEventTarget } = HTMLUtilities;
|
|
81
|
-
KeyboardNavigation.prototype.onMouseUp = function (e) {
|
|
82
|
-
delete this.isClickingChart;
|
|
83
|
-
if (!this.keyboardReset && e.relatedTarget !== simulatedEventTarget) {
|
|
84
|
-
const chart = this.chart;
|
|
85
|
-
const target = e.composedPath()[0];
|
|
86
|
-
if (!target || !chart.container.contains(target)) {
|
|
87
|
-
const curMod = this.modules?.[this.currentModuleIx || 0];
|
|
88
|
-
if (curMod?.terminate) {
|
|
89
|
-
curMod.terminate();
|
|
90
|
-
}
|
|
91
|
-
this.currentModuleIx = 0;
|
|
92
|
-
}
|
|
93
|
-
if (chart.focusElement) {
|
|
94
|
-
chart.focusElement.removeFocusBorder();
|
|
95
|
-
delete chart.focusElement;
|
|
96
|
-
}
|
|
97
|
-
this.keyboardReset = true;
|
|
62
|
+
|
|
63
|
+
// `delete` restores the inherited Event.prototype.target accessor.
|
|
64
|
+
Object.defineProperty(e, 'target', { value: e.composedPath()[0], configurable: true });
|
|
65
|
+
try {
|
|
66
|
+
return proceed.call(this, e, ...args);
|
|
67
|
+
} finally {
|
|
68
|
+
delete e.target;
|
|
98
69
|
}
|
|
99
|
-
}
|
|
70
|
+
}
|
|
71
|
+
/* eslint-enable @typescript-eslint/no-invalid-this */
|
|
72
|
+
|
|
73
|
+
Highcharts.wrap(Pointer.prototype, 'onDocumentMouseMove', withComposedTarget);
|
|
74
|
+
Highcharts.wrap(KeyboardNavigation.prototype, 'onMouseUp', withComposedTarget);
|
|
100
75
|
|
|
101
76
|
// Init Highcharts global language defaults
|
|
102
77
|
// No data message should be empty by default
|
|
@@ -720,7 +695,51 @@ export const ChartMixin = (superClass) =>
|
|
|
720
695
|
this.configuration = Highcharts.chart(this.$.chart, options);
|
|
721
696
|
}
|
|
722
697
|
|
|
723
|
-
this.
|
|
698
|
+
this.__syncOutsideTooltipColors();
|
|
699
|
+
this.__markStickyTooltip();
|
|
700
|
+
this.__redrawOrganizationDataLabels();
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
/**
|
|
704
|
+
* A `tooltip: { outside: true }` tooltip renders in `document.body`, so it
|
|
705
|
+
* inherits neither the palette a theme scopes to `vaadin-chart` nor any
|
|
706
|
+
* `--vaadin-charts-color-*` set on this element. Copy the resolved series
|
|
707
|
+
* colours onto its container instead.
|
|
708
|
+
*
|
|
709
|
+
* @private
|
|
710
|
+
*/
|
|
711
|
+
__syncOutsideTooltipColors() {
|
|
712
|
+
const { tooltip } = this.configuration;
|
|
713
|
+
if (!tooltip || !tooltip.outside) {
|
|
714
|
+
return;
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
Highcharts.addEvent(tooltip, 'refresh', () => {
|
|
718
|
+
const { container } = tooltip;
|
|
719
|
+
if (!container) {
|
|
720
|
+
return;
|
|
721
|
+
}
|
|
722
|
+
const style = getComputedStyle(this);
|
|
723
|
+
for (let i = 0; i < 10; i++) {
|
|
724
|
+
container.style.setProperty(`--_color-${i}`, style.getPropertyValue(`--_color-${i}`));
|
|
725
|
+
}
|
|
726
|
+
});
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
/**
|
|
730
|
+
* Marks the tooltip so the stylesheet can make it reachable by the pointer. CSS
|
|
731
|
+
* cannot see the `stickOnContact` option, and Highcharts only applies it itself
|
|
732
|
+
* when styled mode is off. See highcharts/highcharts#25310.
|
|
733
|
+
*
|
|
734
|
+
* @private
|
|
735
|
+
*/
|
|
736
|
+
__markStickyTooltip() {
|
|
737
|
+
const { tooltip } = this.configuration;
|
|
738
|
+
|
|
739
|
+
Highcharts.addEvent(tooltip, 'refresh', () => {
|
|
740
|
+
// `refresh` also fires when a formatter returns false, before any label exists.
|
|
741
|
+
tooltip.label?.element.classList.toggle('vaadin-chart-sticky-tooltip', tooltip.shouldStickOnContact());
|
|
742
|
+
});
|
|
724
743
|
}
|
|
725
744
|
|
|
726
745
|
/** @protected */
|
|
@@ -1476,24 +1495,26 @@ export const ChartMixin = (superClass) =>
|
|
|
1476
1495
|
/**
|
|
1477
1496
|
* @private
|
|
1478
1497
|
* Workaround for https://github.com/highcharts/highcharts/issues/23443
|
|
1479
|
-
*
|
|
1480
|
-
*
|
|
1498
|
+
* In styled mode the label CSS is not applied yet when "organization" data
|
|
1499
|
+
* labels are first measured, so they need a second measurement pass.
|
|
1481
1500
|
*
|
|
1482
1501
|
* TODO: Remove when the related ticket is fixed
|
|
1483
1502
|
*/
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
const { options } = chart;
|
|
1487
|
-
const hasOrganizationSeries =
|
|
1488
|
-
options.chart.styledMode &&
|
|
1489
|
-
(options.chart.type === 'organization' || options.series.some((series) => series.type === 'organization'));
|
|
1490
|
-
if (!hasOrganizationSeries) {
|
|
1503
|
+
__redrawOrganizationDataLabels() {
|
|
1504
|
+
if (!this.configuration.options.chart.styledMode) {
|
|
1491
1505
|
return;
|
|
1492
1506
|
}
|
|
1493
1507
|
|
|
1508
|
+
// Series declared as <vaadin-chart-series> children are not on the chart yet,
|
|
1509
|
+
// so the organization check waits for the frame too. Reading the chart there
|
|
1510
|
+
// rather than capturing it also keeps a pending frame from holding a
|
|
1511
|
+
// destroyed chart alive.
|
|
1494
1512
|
requestAnimationFrame(() => {
|
|
1495
|
-
|
|
1496
|
-
|
|
1513
|
+
this.configuration?.series.forEach((series) => {
|
|
1514
|
+
if (series.type === 'organization') {
|
|
1515
|
+
series.drawDataLabels?.();
|
|
1516
|
+
}
|
|
1517
|
+
});
|
|
1497
1518
|
});
|
|
1498
1519
|
}
|
|
1499
1520
|
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
8
8
|
* license.
|
|
9
9
|
*/
|
|
10
|
-
import { deepMerge } from '
|
|
10
|
+
import { deepMerge } from '@vaadin/component-base/src/object-utils.js';
|
|
11
11
|
|
|
12
12
|
export const ChartSeriesMixin = (superClass) =>
|
|
13
13
|
class extends superClass {
|
package/src/vaadin-chart.js
CHANGED
|
@@ -149,6 +149,7 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
|
|
|
149
149
|
* @fires {CustomEvent} xaxes-extremes-set - Fired when the minimum and maximum is set for the X axis.
|
|
150
150
|
* @fires {CustomEvent} yaxes-extremes-set - Fired when the minimum and maximum is set for the Y axis.
|
|
151
151
|
*
|
|
152
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
152
153
|
* @customElement vaadin-chart
|
|
153
154
|
* @extends HTMLElement
|
|
154
155
|
*/
|
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.0-
|
|
4
|
+
"version": "25.3.0-rc1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -49,17 +49,6 @@
|
|
|
49
49
|
]
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
|
-
{
|
|
53
|
-
"name": "theme",
|
|
54
|
-
"description": "The theme variants to apply to the component.",
|
|
55
|
-
"value": {
|
|
56
|
-
"type": [
|
|
57
|
-
"string",
|
|
58
|
-
"null",
|
|
59
|
-
"undefined"
|
|
60
|
-
]
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
52
|
{
|
|
64
53
|
"name": "title",
|
|
65
54
|
"description": "The name of the series as shown in the legend, tooltip etc.",
|
|
@@ -217,7 +206,7 @@
|
|
|
217
206
|
},
|
|
218
207
|
{
|
|
219
208
|
"name": "vaadin-chart",
|
|
220
|
-
"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.0-
|
|
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.0-rc1/#/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.0-rc1/#/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.",
|
|
221
210
|
"attributes": [
|
|
222
211
|
{
|
|
223
212
|
"name": "category-max",
|
|
@@ -305,9 +294,7 @@
|
|
|
305
294
|
"description": "The theme variants to apply to the component.",
|
|
306
295
|
"value": {
|
|
307
296
|
"type": [
|
|
308
|
-
"string"
|
|
309
|
-
"null",
|
|
310
|
-
"undefined"
|
|
297
|
+
"string"
|
|
311
298
|
]
|
|
312
299
|
}
|
|
313
300
|
},
|
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.0-
|
|
4
|
+
"version": "25.3.0-rc1",
|
|
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.0-
|
|
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.0-rc1/#/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.0-rc1/#/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
|
{
|