@vaadin/charts 24.0.0-alpha8 → 24.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,15 +36,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8",
+    "@vaadin/component-base": "24.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta1",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
   "cvdlName": "vaadin-chart",
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
+  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
 }

package/src/vaadin-chart-series.d.ts

@@ -131,7 +131,7 @@ declare class ChartSeries extends HTMLElement {
   markers: ChartSeriesMarkers | null | undefined;
 
   /**
-   * Used to connect the series to an axis; if multiple series have the same “unit”, they will share axis.
+   * Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.
    * Displayed as a title for the axis.
    * If no unit is defined, then series will be connected to the first axis.
    */

package/src/vaadin-chart-series.js

@@ -61,55 +61,6 @@ class ChartSeries extends PolymerElement {
     return 'vaadin-chart-series';
   }
 
-  get options() {
-    const options = deepMerge({}, this.additionalOptions);
-
-    if (this.type) {
-      options.type = this.type;
-    }
-
-    if (this.title) {
-      options.name = this.title;
-    }
-
-    if (this.values) {
-      options.data = this.values;
-    }
-
-    if (this.markers) {
-      if (!this.__isMarkersValid()) {
-        this.markers = 'auto';
-      }
-      options.marker = this.__markersConfiguration;
-    }
-
-    if (this.unit) {
-      options.yAxis = this.unit;
-    }
-
-    if (this.stack) {
-      options.stack = this.stack;
-    }
-
-    if (isFinite(this.valueMin)) {
-      options.yAxisValueMin = this.valueMin;
-    }
-
-    if (isFinite(this.valueMax)) {
-      options.yAxisValueMax = this.valueMax;
-    }
-
-    if (this.neckWidth) {
-      options.neckWidth = this.neckWidth;
-    }
-
-    if (this.neckPosition) {
-      options.neckHeight = this.neckPosition;
-    }
-
-    return options;
-  }
-
   static get properties() {
     return {
       /**
@@ -186,7 +137,7 @@ class ChartSeries extends PolymerElement {
       },
 
       /**
-       * Used to connect the series to an axis; if multiple series have the same “unit”, they will share axis.
+       * Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.
        * Displayed as a title for the axis.
        * If no unit is defined, then series will be connected to the first axis.
        */
@@ -274,6 +225,74 @@ class ChartSeries extends PolymerElement {
     ];
   }
 
+  get options() {
+    const options = deepMerge({}, this.additionalOptions);
+
+    if (this.type) {
+      options.type = this.type;
+    }
+
+    if (this.title) {
+      options.name = this.title;
+    }
+
+    if (this.values) {
+      options.data = this.values;
+    }
+
+    if (this.markers) {
+      if (!this.__isMarkersValid()) {
+        this.markers = 'auto';
+      }
+      options.marker = this.__markersConfiguration;
+    }
+
+    if (this.unit) {
+      options.yAxis = this.unit;
+    }
+
+    if (this.stack) {
+      options.stack = this.stack;
+    }
+
+    if (isFinite(this.valueMin)) {
+      options.yAxisValueMin = this.valueMin;
+    }
+
+    if (isFinite(this.valueMax)) {
+      options.yAxisValueMax = this.valueMax;
+    }
+
+    if (this.neckWidth) {
+      options.neckWidth = this.neckWidth;
+    }
+
+    if (this.neckPosition) {
+      options.neckHeight = this.neckPosition;
+    }
+
+    return options;
+  }
+
+  /** @private */
+  get __markersConfiguration() {
+    const config = {};
+    switch (this.markers) {
+      case 'shown':
+        config.enabled = true;
+        break;
+      case 'hidden':
+        config.enabled = false;
+        break;
+      case 'auto':
+      default:
+        config.enabled = null;
+        break;
+    }
+
+    return config;
+  }
+
   /**
    * Method to attach a series object of type `Highcharts.Series`.
    * @param {!Series} series Object of type `Highcharts.Series`
@@ -418,25 +437,6 @@ class ChartSeries extends PolymerElement {
     });
   }
 
-  /** @private */
-  get __markersConfiguration() {
-    const config = {};
-    switch (this.markers) {
-      case 'shown':
-        config.enabled = true;
-        break;
-      case 'hidden':
-        config.enabled = false;
-        break;
-      case 'auto':
-      default:
-        config.enabled = null;
-        break;
-    }
-
-    return config;
-  }
-
   /** @private */
   __showWarn(propertyName, acceptedValues) {
     console.warn(`<vaadin-chart-series> Acceptable values for "${propertyName}" are ${acceptedValues}`);

package/src/vaadin-chart.d.ts

@@ -364,22 +364,6 @@ export type ChartEventMap = ChartCustomEventMap & HTMLElementEventMap;
  *  2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).
  *  3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).
  *
- * Using as a base the project created with in Quick Start and an `additionalOptions` in order to make RTL adjustments:
- *
- * ```html
- *  <vaadin-chart title="۱- عنوان نمودار" subtitle="۲- عنوان فرعی نمودار"
- *    additional-options='{"title": {"useHTML": true}, "tooltip": {"useHTML": true}, "subtitle": {"useHTML": true},
- *    "legend": {"rtl": true}, "yAxis": [{"id": "۴- مقادیر", "title": {"text": "۴- مقادیر", "useHTML": true}}],
- *    "xAxis": {"reversed": true}}'>
- *    <vaadin-chart-series
- *          type= "column"
- *          title="۳- عنوان ردیف"
- *          unit="۴- مقادیر"
- *          values="[10,20,30]">
- *    </vaadin-chart-series>
- *  </vaadin-chart>
- * ```
- *
  * ### Setting colors
  *
  * Although charts can be styled as described above, there is a simpler way for setting colors.
@@ -555,12 +539,12 @@ declare class Chart extends ResizeMixin(ThemableMixin(ElementMixin(HTMLElement))
    *
    * @param {!Options} jsonConfiguration Object chart configuration. Most important properties are:
    *
+   * - annotations `Object[]` custom labels or shapes that can be tied to points, axis coordinates or chart pixel coordinates.
+   *    Detailed API for annotations object is available in [API Site](http://api.highcharts.com/highcharts/annotations)
    * - chart `Object` with options regarding the chart area and plot area as well as general chart options.
    *    Detailed API for chart object is available in [API Site](http://api.highcharts.com/highcharts/chart)
    * - credits `Object` with options regarding the chart area and plot area as well as general chart options.
    *    Detailed API for credits object is available in [API Site](http://api.highcharts.com/highcharts/credits)
-   * - labels `Object[]` with HTML labels that can be positioned anywhere in the chart area
-   *    Detailed API for labels object is available in [API Site](http://api.highcharts.com/highcharts/labels)
    * - plotOptions `Object` wrapper for config objects for each series type.
    *    Detailed API for plotOptions object is available in [API Site](http://api.highcharts.com/highcharts/plotOptions)
    * - series `Object[]` the actual series to append to the chart.

package/src/vaadin-chart.js

@@ -10,6 +10,7 @@
  */
 import 'highcharts/es-modules/masters/highstock.src.js';
 import 'highcharts/es-modules/masters/modules/accessibility.src.js';
+import 'highcharts/es-modules/masters/modules/annotations.src.js';
 import 'highcharts/es-modules/masters/highcharts-more.src.js';
 import 'highcharts/es-modules/masters/highcharts-3d.src.js';
 import 'highcharts/es-modules/masters/modules/data.src.js';
@@ -57,7 +58,7 @@ export function deepMerge(target, source) {
 }
 
 ['exportChart', 'exportChartLocal', 'getSVG'].forEach((methodName) => {
-  /* eslint-disable no-invalid-this, prefer-arrow-callback */
+  /* eslint-disable @typescript-eslint/no-invalid-this, prefer-arrow-callback */
   Highcharts.wrap(Highcharts.Chart.prototype, methodName, function (proceed, ...args) {
     Highcharts.fireEvent(this, 'beforeExport');
     const result = proceed.apply(this, args);
@@ -183,22 +184,6 @@ Highcharts.setOptions({ lang: { noData: '' } });
  *  2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).
  *  3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).
  *
- * Using as a base the project created with in Quick Start and an `additionalOptions` in order to make RTL adjustments:
- *
- * ```html
- *  <vaadin-chart title="۱- عنوان نمودار" subtitle="۲- عنوان فرعی نمودار"
- *    additional-options='{"title": {"useHTML": true}, "tooltip": {"useHTML": true}, "subtitle": {"useHTML": true},
- *    "legend": {"rtl": true}, "yAxis": [{"id": "۴- مقادیر", "title": {"text": "۴- مقادیر", "useHTML": true}}],
- *    "xAxis": {"reversed": true}}'>
- *    <vaadin-chart-series
- *          type= "column"
- *          title="۳- عنوان ردیف"
- *          unit="۴- مقادیر"
- *          values="[10,20,30]">
- *    </vaadin-chart-series>
- *  </vaadin-chart>
- * ```
- *
  * ### Setting colors
  *
  * Although charts can be styled as described above, there is a simpler way for setting colors.
@@ -274,18 +259,6 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     return 'vaadin-chart';
   }
 
-  /** @private */
-  static __callHighchartsFunction(functionName, redrawCharts, ...args) {
-    const functionToCall = Highcharts[functionName];
-    if (functionToCall && typeof functionToCall === 'function') {
-      args.forEach((arg) => inflateFunctions(arg));
-      functionToCall.apply(this.configuration, args);
-      if (redrawCharts) {
-        Highcharts.charts.forEach((c) => c.redraw());
-      }
-    }
-  }
-
   static get properties() {
     return {
       /**
@@ -483,10 +456,23 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     ];
   }
 
+  /** @private */
+  static __callHighchartsFunction(functionName, redrawCharts, ...args) {
+    const functionToCall = Highcharts[functionName];
+    if (functionToCall && typeof functionToCall === 'function') {
+      args.forEach((arg) => inflateFunctions(arg));
+      functionToCall.apply(this.configuration, args);
+      if (redrawCharts) {
+        Highcharts.charts.forEach((c) => c.redraw());
+      }
+    }
+  }
+
   constructor() {
     super();
 
     this._baseConfig = {
+      annotations: [],
       chart: {
         styledMode: true,
       },
@@ -514,33 +500,6 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     };
   }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this.__updateStyles();
-    beforeNextRender(this, () => {
-      // Detect if the chart had already been initialized. This might happen in
-      // environments where the chart is lazily attached (e.g Grid).
-      if (this.configuration) {
-        this.__reflow();
-        return;
-      }
-
-      const options = { ...this.options, ...this._jsonConfigurationBuffer };
-      this._jsonConfigurationBuffer = null;
-      this.__initChart(options);
-      this.__addChildObserver();
-      this.__checkTurboMode();
-    });
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.addEventListener('chart-redraw', this.__onRedraw.bind(this));
-  }
-
   /**
    * @return {!Options}
    */
@@ -920,6 +879,33 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     };
   }
 
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    this.__updateStyles();
+    beforeNextRender(this, () => {
+      // Detect if the chart had already been initialized. This might happen in
+      // environments where the chart is lazily attached (e.g Grid).
+      if (this.configuration) {
+        this.__reflow();
+        return;
+      }
+
+      const options = { ...this.options, ...this._jsonConfigurationBuffer };
+      this._jsonConfigurationBuffer = null;
+      this.__initChart(options);
+      this.__addChildObserver();
+      this.__checkTurboMode();
+    });
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.addEventListener('chart-redraw', this.__onRedraw.bind(this));
+  }
+
   /**
    * Implements resize callback from `ResizeMixin`
    * to reflow when the chart element is resized.
@@ -1120,12 +1106,12 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
    *
    * @param {!Options} jsonConfiguration Object chart configuration. Most important properties are:
    *
+   * - annotations `Object[]` custom labels or shapes that can be tied to points, axis coordinates or chart pixel coordinates.
+   *    Detailed API for annotations object is available in [API Site](http://api.highcharts.com/highcharts/annotations)
    * - chart `Object` with options regarding the chart area and plot area as well as general chart options.
    *    Detailed API for chart object is available in [API Site](http://api.highcharts.com/highcharts/chart)
    * - credits `Object` with options regarding the chart area and plot area as well as general chart options.
    *    Detailed API for credits object is available in [API Site](http://api.highcharts.com/highcharts/credits)
-   * - labels `Object[]` with HTML labels that can be positioned anywhere in the chart area
-   *    Detailed API for labels object is available in [API Site](http://api.highcharts.com/highcharts/labels)
    * - plotOptions `Object` wrapper for config objects for each series type.
    *    Detailed API for plotOptions object is available in [API Site](http://api.highcharts.com/highcharts/plotOptions)
    * - series `Object[]` the actual series to append to the chart.
@@ -1312,10 +1298,9 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
             if (!this.tempBodyStyle) {
               let effectiveCss = '';
 
-              const shadowStyles = this.shadowRoot.querySelectorAll('style');
-              for (let i = 0; i < shadowStyles.length; i++) {
-                effectiveCss += shadowStyles[i].textContent;
-              }
+              [...this.shadowRoot.querySelectorAll('style')].forEach((style) => {
+                effectiveCss += style.textContent;
+              });
 
               // Strip off host selectors that target individual instances
               effectiveCss = effectiveCss.replace(/:host\(.+?\)/gu, (match) => {

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "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#### Configuring your chart 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#### Configuring your chart using JS API\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data\n```js\ninitChartWithJSApi() {\n    requestAnimationFrame(() => {\n       const configuration = this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSApi();\n}\n```\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data\n```js\ninitChartWithJSJSONApi() {\n    this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSJSONApi();\n}\n```\n\nIt should be noted that 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\nUsing as a base the project created with in Quick Start and an `additionalOptions` in order to make RTL adjustments:\n\n```html\n <vaadin-chart title=\"۱- عنوان نمودار\" subtitle=\"۲- عنوان فرعی نمودار\"\n   additional-options='{\"title\": {\"useHTML\": true}, \"tooltip\": {\"useHTML\": true}, \"subtitle\": {\"useHTML\": true},\n   \"legend\": {\"rtl\": true}, \"yAxis\": [{\"id\": \"۴- مقادیر\", \"title\": {\"text\": \"۴- مقادیر\", \"useHTML\": true}}],\n   \"xAxis\": {\"reversed\": true}}'>\n   <vaadin-chart-series\n         type= \"column\"\n         title=\"۳- عنوان ردیف\"\n         unit=\"۴- مقادیر\"\n         values=\"[10,20,30]\">\n   </vaadin-chart-series>\n </vaadin-chart>\n```\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.\n\n### Validating your License\n\nWhen using Vaadin Charts in a development environment, you will see a pop-up that asks you\nto validate your license by signing in to vaadin.com.",
+          "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#### Configuring your chart 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#### Configuring your chart using JS API\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data\n```js\ninitChartWithJSApi() {\n    requestAnimationFrame(() => {\n       const configuration = this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSApi();\n}\n```\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data\n```js\ninitChartWithJSJSONApi() {\n    this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSJSONApi();\n}\n```\n\nIt should be noted that 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.\n\n### Validating your License\n\nWhen using Vaadin Charts in a development environment, you will see a pop-up that asks you\nto validate your license by signing in to vaadin.com.",
           "attributes": [
             {
               "name": "category-max",
@@ -509,7 +509,7 @@
             },
             {
               "name": "unit",
-              "description": "Used to connect the series to an axis; if multiple series have the same “unit”, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
+              "description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
               "value": {
                 "type": [
                   "string",
@@ -625,7 +625,7 @@
               },
               {
                 "name": "unit",
-                "description": "Used to connect the series to an axis; if multiple series have the same “unit”, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
+                "description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "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#### Configuring your chart 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#### Configuring your chart using JS API\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data\n```js\ninitChartWithJSApi() {\n    requestAnimationFrame(() => {\n       const configuration = this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSApi();\n}\n```\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data\n```js\ninitChartWithJSJSONApi() {\n    this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSJSONApi();\n}\n```\n\nIt should be noted that 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\nUsing as a base the project created with in Quick Start and an `additionalOptions` in order to make RTL adjustments:\n\n```html\n <vaadin-chart title=\"۱- عنوان نمودار\" subtitle=\"۲- عنوان فرعی نمودار\"\n   additional-options='{\"title\": {\"useHTML\": true}, \"tooltip\": {\"useHTML\": true}, \"subtitle\": {\"useHTML\": true},\n   \"legend\": {\"rtl\": true}, \"yAxis\": [{\"id\": \"۴- مقادیر\", \"title\": {\"text\": \"۴- مقادیر\", \"useHTML\": true}}],\n   \"xAxis\": {\"reversed\": true}}'>\n   <vaadin-chart-series\n         type= \"column\"\n         title=\"۳- عنوان ردیف\"\n         unit=\"۴- مقادیر\"\n         values=\"[10,20,30]\">\n   </vaadin-chart-series>\n </vaadin-chart>\n```\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.\n\n### Validating your License\n\nWhen using Vaadin Charts in a development environment, you will see a pop-up that asks you\nto validate your license by signing in to vaadin.com.",
+          "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#### Configuring your chart 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#### Configuring your chart using JS API\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data\n```js\ninitChartWithJSApi() {\n    requestAnimationFrame(() => {\n       const configuration = this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSApi();\n}\n```\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data\n```js\ninitChartWithJSJSONApi() {\n    this.$.mychart.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```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSJSONApi();\n}\n```\n\nIt should be noted that 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.\n\n### Validating your License\n\nWhen using Vaadin Charts in a development environment, you will see a pop-up that asks you\nto validate your license by signing in to vaadin.com.",
           "extension": true,
           "attributes": [
             {
@@ -392,7 +392,7 @@
             },
             {
               "name": ".unit",
-              "description": "Used to connect the series to an axis; if multiple series have the same “unit”, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
+              "description": "Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.\nDisplayed as a title for the axis.\nIf no unit is defined, then series will be connected to the first axis.",
               "value": {
                 "kind": "expression"
               }