@vaadin/charts 25.4.0-alpha2 → 25.4.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "25.4.0-alpha2",
+  "version": "25.4.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -35,17 +35,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.4.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.4.0-alpha2",
+    "@vaadin/component-base": "25.4.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "25.4.0-alpha3",
     "highcharts": "12.2.0",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.4.0-alpha2",
-    "@vaadin/chai-plugins": "25.4.0-alpha2",
-    "@vaadin/test-runner-commands": "25.4.0-alpha2",
+    "@vaadin/aura": "25.4.0-alpha3",
+    "@vaadin/chai-plugins": "25.4.0-alpha3",
+    "@vaadin/test-runner-commands": "25.4.0-alpha3",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.4.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.4.0-alpha3",
     "sinon": "^22.0.0"
   },
   "cvdlName": "vaadin-chart",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "213f8b55112558d2f976d8730fe44370ca868333"
+  "gitHead": "db7e679c1a8af00840cc05ddcbefff68dfed1e45"
 }

package/src/vaadin-chart-mixin.js

@@ -700,7 +700,7 @@ export const ChartMixin = (superClass) =>
         this.configuration = Highcharts.chart(this.$.chart, options);
       }
 
-      this.__syncOutsideTooltipColors();
+      this.__syncOutsideTooltipStyles();
       this.__markStickyTooltip();
       this.__redrawOrganizationDataLabels();
     }
@@ -708,26 +708,32 @@ export const ChartMixin = (superClass) =>
     /**
      * A `tooltip: { outside: true }` tooltip renders in `document.body`, so it
      * inherits neither the palette a theme scopes to `vaadin-chart` nor any
-     * `--vaadin-charts-color-*` set on this element. Copy the resolved series
-     * colors onto its container instead. Only styled mode needs them.
+     * `--vaadin-charts-color-*` or font size set on this element. Copy the
+     * resolved series colors and font size onto its container instead. Only
+     * styled mode needs them.
+     *
+     * The tooltip creates its container in `getLabel()` and measures its text
+     * right after, so the font size must be in place by then.
      *
      * @private
      */
-    __syncOutsideTooltipColors() {
+    __syncOutsideTooltipStyles() {
       const { tooltip } = this.configuration;
       if (!tooltip || !tooltip.outside || !this.__styledMode) {
         return;
       }
 
-      Highcharts.addEvent(tooltip, 'refresh', () => {
+      Highcharts.wrap(tooltip, 'getLabel', (proceed, ...args) => {
+        const label = proceed.apply(tooltip, args);
         const { container } = tooltip;
-        if (!container) {
-          return;
-        }
-        const style = getComputedStyle(this);
-        for (let i = 0; i < 10; i++) {
-          container.style.setProperty(`--_color-${i}`, style.getPropertyValue(`--_color-${i}`));
+        if (container) {
+          const style = getComputedStyle(this);
+          for (let i = 0; i < 10; i++) {
+            container.style.setProperty(`--_color-${i}`, style.getPropertyValue(`--_color-${i}`));
+          }
+          container.style.setProperty('--vaadin-charts-font-size', style.fontSize);
         }
+        return label;
       });
     }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.4.0-alpha2",
+  "version": "25.4.0-alpha3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -206,7 +206,7 @@
         },
         {
           "name": "vaadin-chart",
-          "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.4.0-alpha2/#/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.4.0-alpha2/#/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.",
+          "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.4.0-alpha3/#/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.4.0-alpha3/#/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.",
           "attributes": [
             {
               "name": "category-max",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.4.0-alpha2",
+  "version": "25.4.0-alpha3",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -100,7 +100,7 @@
         },
         {
           "name": "vaadin-chart",
-          "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.4.0-alpha2/#/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.4.0-alpha2/#/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.",
+          "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.4.0-alpha3/#/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.4.0-alpha3/#/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.",
           "extension": true,
           "attributes": [
             {