@vaadin/charts 25.1.0-beta1 → 25.1.0-beta3

package/custom-elements.json

@@ -86,7 +86,7 @@
               "name": "categoryPosition",
               "privacy": "public",
               "type": {
-                "text": "ChartCategoryPosition | undefined"
+                "text": "string"
               },
               "description": "The position of the category axis. Acceptable values are `left`, `right`, `top` and `bottom`\nexcept for bar charts which only accept `left` and `right`.\nWith the default value, charts appear as though they have `category-position=\"bottom\"`\nexcept for bar charts that appear as though they have `category-position=\"left\"`.\n\nDefaults to `undefined`",
               "attribute": "category-position"
@@ -156,7 +156,7 @@
               "name": "stacking",
               "privacy": "public",
               "type": {
-                "text": "ChartStacking | undefined"
+                "text": "string"
               },
               "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.",
               "attribute": "stacking"
@@ -166,7 +166,7 @@
               "name": "subtitle",
               "privacy": "public",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "description": "Represents the subtitle of the chart.",
               "attribute": "subtitle"
@@ -270,7 +270,7 @@
             {
               "name": "category-position",
               "type": {
-                "text": "ChartCategoryPosition | undefined"
+                "text": "string"
               },
               "description": "The position of the category axis. Acceptable values are `left`, `right`, `top` and `bottom`\nexcept for bar charts which only accept `left` and `right`.\nWith the default value, charts appear as though they have `category-position=\"bottom\"`\nexcept for bar charts that appear as though they have `category-position=\"left\"`.\n\nDefaults to `undefined`",
               "fieldName": "categoryPosition"
@@ -318,7 +318,7 @@
             {
               "name": "stacking",
               "type": {
-                "text": "ChartStacking | undefined"
+                "text": "string"
               },
               "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.",
               "fieldName": "stacking"
@@ -326,7 +326,7 @@
             {
               "name": "subtitle",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "description": "Represents the subtitle of the chart.",
               "fieldName": "subtitle"
@@ -412,7 +412,7 @@
               "name": "markers",
               "privacy": "public",
               "type": {
-                "text": "ChartSeriesMarkers | undefined"
+                "text": "string"
               },
               "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)*",
               "attribute": "markers"
@@ -545,7 +545,7 @@
             {
               "name": "markers",
               "type": {
-                "text": "ChartSeriesMarkers | undefined"
+                "text": "string"
               },
               "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)*",
               "fieldName": "markers"
@@ -678,7 +678,7 @@
               "name": "markers",
               "privacy": "public",
               "type": {
-                "text": "ChartSeriesMarkers | undefined"
+                "text": "string"
               },
               "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)*",
               "attribute": "markers",
@@ -879,7 +879,7 @@
             {
               "name": "markers",
               "type": {
-                "text": "ChartSeriesMarkers | undefined"
+                "text": "string"
               },
               "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)*",
               "fieldName": "markers",
@@ -1094,7 +1094,7 @@
               "name": "categoryPosition",
               "privacy": "public",
               "type": {
-                "text": "ChartCategoryPosition | undefined"
+                "text": "string"
               },
               "description": "The position of the category axis. Acceptable values are `left`, `right`, `top` and `bottom`\nexcept for bar charts which only accept `left` and `right`.\nWith the default value, charts appear as though they have `category-position=\"bottom\"`\nexcept for bar charts that appear as though they have `category-position=\"left\"`.\n\nDefaults to `undefined`",
               "attribute": "category-position",
@@ -1192,7 +1192,7 @@
               "name": "stacking",
               "privacy": "public",
               "type": {
-                "text": "ChartStacking | undefined"
+                "text": "string"
               },
               "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.",
               "attribute": "stacking",
@@ -1206,7 +1206,7 @@
               "name": "subtitle",
               "privacy": "public",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "description": "Represents the subtitle of the chart.",
               "attribute": "subtitle",
@@ -1449,7 +1449,7 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "-Fired when the point is selected either programmatically or by clicking on the point.",
+              "description": "Fired when the point is selected either programmatically or by clicking on the point.",
               "name": "point-select"
             },
             {
@@ -1505,15 +1505,15 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the mouse enters the graph.",
-              "name": "series-mouse-enter"
+              "description": "Fired when the mouse leaves the graph.",
+              "name": "series-mouse-out"
             },
             {
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the mouse leaves the graph.",
-              "name": "series-mouse-out"
+              "description": "Fired when the mouse enters the graph.",
+              "name": "series-mouse-over"
             },
             {
               "type": {
@@ -1617,7 +1617,7 @@
             {
               "name": "category-position",
               "type": {
-                "text": "ChartCategoryPosition | undefined"
+                "text": "string"
               },
               "description": "The position of the category axis. Acceptable values are `left`, `right`, `top` and `bottom`\nexcept for bar charts which only accept `left` and `right`.\nWith the default value, charts appear as though they have `category-position=\"bottom\"`\nexcept for bar charts that appear as though they have `category-position=\"left\"`.\n\nDefaults to `undefined`",
               "fieldName": "categoryPosition",
@@ -1689,7 +1689,7 @@
             {
               "name": "stacking",
               "type": {
-                "text": "ChartStacking | undefined"
+                "text": "string"
               },
               "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.",
               "fieldName": "stacking",
@@ -1701,7 +1701,7 @@
             {
               "name": "subtitle",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "description": "Represents the subtitle of the chart.",
               "fieldName": "subtitle",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "25.1.0-beta1",
+  "version": "25.1.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.1.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-beta1",
+    "@vaadin/component-base": "25.1.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-beta3",
     "highcharts": "12.2.0",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.1.0-beta1",
-    "@vaadin/chai-plugins": "25.1.0-beta1",
-    "@vaadin/test-runner-commands": "25.1.0-beta1",
+    "@vaadin/aura": "25.1.0-beta3",
+    "@vaadin/chai-plugins": "25.1.0-beta3",
+    "@vaadin/test-runner-commands": "25.1.0-beta3",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.1.0-beta1",
-    "sinon": "^21.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.1.0-beta3",
+    "sinon": "^21.0.2"
   },
   "cvdlName": "vaadin-chart",
   "customElements": "custom-elements.json",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0ccf77c385fc6a92ac2a6344ce8804b94956226d"
+  "gitHead": "4251850231a42298fda23b83928da588831cdb5d"
 }

package/src/vaadin-chart-mixin.js

@@ -177,7 +177,6 @@ export const ChartMixin = (superClass) =>
          * Defaults to `undefined`
          *
          * @attr {left|right|top|bottom} category-position
-         * @type {ChartCategoryPosition | undefined}
          */
         categoryPosition: {
           type: String,
@@ -202,7 +201,6 @@ export const ChartMixin = (superClass) =>
          * If "stack" property is not defined on the vaadin-chart-series elements, then series will be put into
          * the default stack.
          * @attr {normal|percent} stacking
-         * @type {ChartStacking | undefined}
          */
         stacking: {
           type: String,
@@ -222,7 +220,6 @@ export const ChartMixin = (superClass) =>
 
         /**
          * Represents the title of the chart.
-         * @type {string}
          */
         title: {
           type: String,
@@ -251,7 +248,6 @@ export const ChartMixin = (superClass) =>
 
         /**
          * Represents the subtitle of the chart.
-         * @type {string | undefined}
          */
         subtitle: {
           type: String,
@@ -276,7 +272,6 @@ export const ChartMixin = (superClass) =>
         /**
          * Specifies the message displayed on a chart without displayable data.
          * @attr {string} empty-text
-         * @type {string}
          */
         emptyText: {
           type: String,

package/src/vaadin-chart-series-mixin.js

@@ -71,7 +71,6 @@ export const ChartSeriesMixin = (superClass) =>
 
         /**
          * The name of the series as shown in the legend, tooltip etc.
-         * @type {string}
          */
         title: {
           type: String,
@@ -85,7 +84,6 @@ export const ChartSeriesMixin = (superClass) =>
          *  - `shown`: markers are always visible
          *  - `hidden`: markers are always hidden
          *  - `auto`: markers are visible for widespread data and hidden, when data is dense *(default)*
-         * @type {ChartSeriesMarkers | undefined}
          */
         markers: {
           type: String,

package/src/vaadin-chart.d.ts

@@ -129,14 +129,14 @@ export * from './vaadin-chart-mixin.js';
  * @fires {CustomEvent} series-hide - Fired when the series is hidden after chart generation time.
  * @fires {CustomEvent} series-legend-item-click - Fired when the legend item belonging to the series is clicked.
  * @fires {CustomEvent} series-mouse-out - Fired when the mouse leaves the graph.
- * @fires {CustomEvent} series-mouse-enter - Fired when the mouse enters the graph.
+ * @fires {CustomEvent} series-mouse-over - Fired when the mouse enters the graph.
  * @fires {CustomEvent} series-show - Fired when the series is shown after chart generation time.
  * @fires {CustomEvent} point-click - Fired when the point is clicked.
  * @fires {CustomEvent} point-legend-item-click - Fired when the legend item belonging to the point is clicked.
  * @fires {CustomEvent} point-mouse-out - Fired when the mouse leaves the area close to the point.
  * @fires {CustomEvent} point-mouse-over - Fired when the mouse enters the area close to the point.
  * @fires {CustomEvent} point-remove - Fired when the point is removed from the series.
- * @fires {CustomEvent} point-select -Fired when the point is selected either programmatically or by clicking on the point.
+ * @fires {CustomEvent} point-select - Fired when the point is selected either programmatically or by clicking on the point.
  * @fires {CustomEvent} point-unselect - Fired when the point is unselected either programmatically or by clicking on the point.
  * @fires {CustomEvent} point-update - Fired when the point is updated programmatically through `.updateConfiguration()` method.
  * @fires {CustomEvent} point-drag-start - Fired when starting to drag a point.

package/src/vaadin-chart.js

@@ -134,14 +134,14 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
  * @fires {CustomEvent} series-hide - Fired when the series is hidden after chart generation time.
  * @fires {CustomEvent} series-legend-item-click - Fired when the legend item belonging to the series is clicked.
  * @fires {CustomEvent} series-mouse-out - Fired when the mouse leaves the graph.
- * @fires {CustomEvent} series-mouse-enter - Fired when the mouse enters the graph.
+ * @fires {CustomEvent} series-mouse-over - Fired when the mouse enters the graph.
  * @fires {CustomEvent} series-show - Fired when the series is shown after chart generation time.
  * @fires {CustomEvent} point-click - Fired when the point is clicked.
  * @fires {CustomEvent} point-legend-item-click - Fired when the legend item belonging to the point is clicked.
  * @fires {CustomEvent} point-mouse-out - Fired when the mouse leaves the area close to the point.
  * @fires {CustomEvent} point-mouse-over - Fired when the mouse enters the area close to the point.
  * @fires {CustomEvent} point-remove - Fired when the point is removed from the series.
- * @fires {CustomEvent} point-select -Fired when the point is selected either programmatically or by clicking on the point.
+ * @fires {CustomEvent} point-select - Fired when the point is selected either programmatically or by clicking on the point.
  * @fires {CustomEvent} point-unselect - Fired when the point is unselected either programmatically or by clicking on the point.
  * @fires {CustomEvent} point-update - Fired when the point is updated programmatically through `.updateConfiguration()` method.
  * @fires {CustomEvent} point-drag-start - Fired when starting to drag a point.

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.1.0-beta1",
+  "version": "25.1.0-beta3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,7 +15,8 @@
               "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)*",
               "value": {
                 "type": [
-                  "ChartSeriesMarkers",
+                  "string",
+                  "null",
                   "undefined"
                 ]
               }
@@ -66,7 +67,9 @@
               "description": "The name of the series as shown in the legend, tooltip etc.",
               "value": {
                 "type": [
-                  "string"
+                  "string",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -132,7 +135,8 @@
                 "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)*",
                 "value": {
                   "type": [
-                    "ChartSeriesMarkers",
+                    "string",
+                    "null",
                     "undefined"
                   ]
                 }
@@ -172,7 +176,9 @@
                 "description": "The name of the series as shown in the legend, tooltip etc.",
                 "value": {
                   "type": [
-                    "string"
+                    "string",
+                    "null",
+                    "undefined"
                   ]
                 }
               },
@@ -235,7 +241,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.1.0-beta1/#/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-beta1/#/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.1.0-beta3/#/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-beta3/#/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",
@@ -264,7 +270,8 @@
               "description": "The position of the category axis. Acceptable values are `left`, `right`, `top` and `bottom`\nexcept for bar charts which only accept `left` and `right`.\nWith the default value, charts appear as though they have `category-position=\"bottom\"`\nexcept for bar charts that appear as though they have `category-position=\"left\"`.\n\nDefaults to `undefined`",
               "value": {
                 "type": [
-                  "ChartCategoryPosition",
+                  "string",
+                  "null",
                   "undefined"
                 ]
               }
@@ -285,7 +292,9 @@
               "description": "Specifies the message displayed on a chart without displayable data.",
               "value": {
                 "type": [
-                  "string"
+                  "string",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -316,7 +325,8 @@
               "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.",
               "value": {
                 "type": [
-                  "ChartStacking",
+                  "string",
+                  "null",
                   "undefined"
                 ]
               }
@@ -327,6 +337,7 @@
               "value": {
                 "type": [
                   "string",
+                  "null",
                   "undefined"
                 ]
               }
@@ -358,7 +369,9 @@
               "description": "Represents the title of the chart.",
               "value": {
                 "type": [
-                  "string"
+                  "string",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -434,7 +447,8 @@
                 "description": "The position of the category axis. Acceptable values are `left`, `right`, `top` and `bottom`\nexcept for bar charts which only accept `left` and `right`.\nWith the default value, charts appear as though they have `category-position=\"bottom\"`\nexcept for bar charts that appear as though they have `category-position=\"left\"`.\n\nDefaults to `undefined`",
                 "value": {
                   "type": [
-                    "ChartCategoryPosition",
+                    "string",
+                    "null",
                     "undefined"
                   ]
                 }
@@ -465,7 +479,9 @@
                 "description": "Specifies the message displayed on a chart without displayable data.",
                 "value": {
                   "type": [
-                    "string"
+                    "string",
+                    "null",
+                    "undefined"
                   ]
                 }
               },
@@ -496,7 +512,8 @@
                 "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.",
                 "value": {
                   "type": [
-                    "ChartStacking",
+                    "string",
+                    "null",
                     "undefined"
                   ]
                 }
@@ -507,6 +524,7 @@
                 "value": {
                   "type": [
                     "string",
+                    "null",
                     "undefined"
                   ]
                 }
@@ -527,7 +545,9 @@
                 "description": "Represents the title of the chart.",
                 "value": {
                   "type": [
-                    "string"
+                    "string",
+                    "null",
+                    "undefined"
                   ]
                 }
               },

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.1.0-beta1",
+  "version": "25.1.0-beta3",
   "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.1.0-beta1/#/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-beta1/#/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.1.0-beta3/#/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-beta3/#/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": [
             {