@vaadin/charts 25.0.0-alpha12 → 25.0.0-alpha14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "25.0.0-alpha12",
+  "version": "25.0.0-alpha14",
   "publishConfig": {
     "access": "public"
   },
@@ -34,16 +34,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha12",
+    "@vaadin/component-base": "25.0.0-alpha14",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha14",
     "highcharts": "9.2.2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha12",
-    "@vaadin/test-runner-commands": "25.0.0-alpha12",
+    "@vaadin/chai-plugins": "25.0.0-alpha14",
+    "@vaadin/test-runner-commands": "25.0.0-alpha14",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha12",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha14",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-chart",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e75527348f9ba7c363d068c868b9f030c15b84a1"
+  "gitHead": "8ebeeeca4b5b6564eff954d6582d0d6760464e51"
 }

package/src/helpers.js

@@ -57,3 +57,49 @@ export function deepMerge(target, source) {
 
   return target;
 }
+
+export function prepareExport(chart) {
+  // Guard against another print 'before print' event coming before
+  // the 'after print' event.
+  if (!chart.tempBodyStyle) {
+    let effectiveCss = '';
+
+    // LitElement uses `adoptedStyleSheets` for adding styles
+    if (chart.shadowRoot.adoptedStyleSheets) {
+      chart.shadowRoot.adoptedStyleSheets.forEach((sheet) => {
+        effectiveCss += `${[...sheet.cssRules].map((rule) => rule.cssText).join('\n')}\n`;
+      });
+    }
+
+    // Strip off host selectors that target individual instances
+    effectiveCss = effectiveCss.replace(/:host\(.+?\)/gu, (match) => {
+      const selector = match.substr(6, match.length - 7);
+      return chart.matches(selector) ? '' : match;
+    });
+
+    // Zoom out a bit to avoid clipping the chart's edge on paper
+    effectiveCss =
+      `${effectiveCss}body {` +
+      `    -moz-transform: scale(0.9, 0.9);` + // Mozilla
+      `    zoom: 0.9;` + // Others
+      `    zoom: 90%;` + // Webkit
+      `}`;
+
+    chart.tempBodyStyle = document.createElement('style');
+    chart.tempBodyStyle.textContent = effectiveCss;
+    document.body.appendChild(chart.tempBodyStyle);
+    if (chart.options.chart.styledMode) {
+      document.body.setAttribute('styled-mode', '');
+    }
+  }
+}
+
+export function cleanupExport(chart) {
+  if (chart.tempBodyStyle) {
+    document.body.removeChild(chart.tempBodyStyle);
+    delete chart.tempBodyStyle;
+    if (chart.options.chart.styledMode) {
+      document.body.removeAttribute('styled-mode');
+    }
+  }
+}

package/src/styles/vaadin-chart-base-styles.js

@@ -43,7 +43,7 @@ const tooltipStyles = (scope) => css`
 
   ${unsafeCSS(scope)} .highcharts-tooltip-box {
     stroke-width: 1px;
-    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color));
+    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color-subtle));
     fill: var(--vaadin-charts-tooltip-background, var(--vaadin-background-color));
     fill-opacity: var(--vaadin-charts-tooltip-background-opacity, 1);
   }
@@ -51,7 +51,7 @@ const tooltipStyles = (scope) => css`
   ${unsafeCSS(scope)} .highcharts-tooltip-box .highcharts-label-box {
     fill: var(--vaadin-charts-tooltip-background, var(--vaadin-background-color));
     fill-opacity: var(--vaadin-charts-tooltip-background-opacity, 1);
-    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color));
+    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color-subtle));
   }
 
   ${unsafeCSS(scope)} .highcharts-tooltip-header {
@@ -81,6 +81,10 @@ export const chartStyles = css`
     display: block;
     width: 100%;
     overflow: hidden;
+  }
+
+  :host,
+  :root {
     font-size: var(--vaadin-charts-font-size, 0.75rem);
     line-height: normal;
 
@@ -116,13 +120,13 @@ export const chartStyles = css`
     --_secondary-label: var(--vaadin-charts-secondary-label, var(--vaadin-color-subtle));
     --_disabled-label: var(--vaadin-charts-disabled-label, var(--vaadin-color-disabled));
     --_point-border: var(--vaadin-charts-point-border, var(--_bg));
-    --_axis-line: var(--vaadin-charts-axis-line, var(--vaadin-border-color));
+    --_axis-line: var(--vaadin-charts-axis-line, var(--vaadin-border-color-subtle));
     --_axis-title: var(--vaadin-charts-axis-title, var(--_secondary-label));
     --_axis-label: var(--vaadin-charts-axis-label, var(--_secondary-label));
-    --_grid-line: var(--vaadin-charts-grid-line, var(--vaadin-border-color));
+    --_grid-line: var(--vaadin-charts-grid-line, var(--vaadin-border-color-subtle));
     --_minor-grid-line: var(
       --vaadin-charts-minor-grid-line,
-      color-mix(in srgb, var(--vaadin-border-color) 60%, transparent)
+      color-mix(in srgb, var(--vaadin-border-color-subtle) 60%, transparent)
     );
     --_data-label: var(--vaadin-charts-data-label, var(--_label));
   }
@@ -959,7 +963,7 @@ export const chartStyles = css`
   }
 
   :where([styled-mode]) .highcharts-candlestick-series .highcharts-point {
-    stroke: var(--vaadin-charts-candlestick-line, var(--vaadin-border-color-strong));
+    stroke: var(--vaadin-charts-candlestick-line, var(--vaadin-border-color));
     stroke-width: 1px;
   }
 
@@ -1042,7 +1046,7 @@ export const chartStyles = css`
 
   :where([styled-mode]) .highcharts-null-point {
     fill: transparent;
-    stroke: var(--vaadin-border-color);
+    stroke: var(--vaadin-border-color-subtle);
   }
 
   /* 3d charts */

package/src/vaadin-chart-mixin.js

@@ -33,7 +33,7 @@ import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
-import { deepMerge, inflateFunctions } from './helpers.js';
+import { cleanupExport, deepMerge, inflateFunctions, prepareExport } from './helpers.js';
 
 ['exportChart', 'exportChartLocal', 'getSVG'].forEach((methodName) => {
   /* eslint-disable @typescript-eslint/no-invalid-this, prefer-arrow-callback */
@@ -1202,55 +1202,12 @@ export const ChartMixin = (superClass) =>
             // Workaround for https://github.com/vaadin/vaadin-charts/issues/389
             // Hook into beforePrint and beforeExport to ensure correct styling
             if (['beforePrint', 'beforeExport'].indexOf(event.type) >= 0) {
-              // Guard against another print 'before print' event coming before
-              // the 'after print' event.
-              if (!self.tempBodyStyle) {
-                let effectiveCss = '';
-
-                // PolymerElement uses `<style>` tags for adding styles
-                [...self.shadowRoot.querySelectorAll('style')].forEach((style) => {
-                  effectiveCss += style.textContent;
-                });
-
-                // LitElement uses `adoptedStyleSheets` for adding styles
-                if (self.shadowRoot.adoptedStyleSheets) {
-                  self.shadowRoot.adoptedStyleSheets.forEach((sheet) => {
-                    effectiveCss += [...sheet.cssRules].map((rule) => rule.cssText).join('\n');
-                  });
-                }
-
-                // Strip off host selectors that target individual instances
-                effectiveCss = effectiveCss.replace(/:host\(.+?\)/gu, (match) => {
-                  const selector = match.substr(6, match.length - 7);
-                  return self.matches(selector) ? '' : match;
-                });
-
-                // Zoom out a bit to avoid clipping the chart's edge on paper
-                effectiveCss =
-                  `${effectiveCss}body {` +
-                  `    -moz-transform: scale(0.9, 0.9);` + // Mozilla
-                  `    zoom: 0.9;` + // Others
-                  `    zoom: 90%;` + // Webkit
-                  `}`;
-
-                self.tempBodyStyle = document.createElement('style');
-                self.tempBodyStyle.textContent = effectiveCss;
-                document.body.appendChild(self.tempBodyStyle);
-                if (self.options.chart.styledMode) {
-                  document.body.setAttribute('styled-mode', '');
-                }
-              }
+              prepareExport(self);
             }
 
             // Hook into afterPrint and afterExport to revert changes made before
             if (['afterPrint', 'afterExport'].indexOf(event.type) >= 0) {
-              if (self.tempBodyStyle) {
-                document.body.removeChild(self.tempBodyStyle);
-                delete self.tempBodyStyle;
-                if (self.options.chart.styledMode) {
-                  document.body.removeAttribute('styled-mode');
-                }
-              }
+              cleanupExport(self);
             }
 
             self.dispatchEvent(new CustomEvent(eventList[key], customEvent));

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

@@ -19,15 +19,15 @@ export * from './vaadin-chart-series-mixin.js';
  * To use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:
  *
  * ```html
- *  <vaadin-chart>
- *    <vaadin-chart-series></vaadin-chart-series>
- *  </vaadin-chart>
+ * <vaadin-chart>
+ *   <vaadin-chart-series></vaadin-chart-series>
+ * </vaadin-chart>
  * ```
  *
  * `<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:
  *
  * ```html
- *  <vaadin-chart-series values="[10,20,30,40,50]"></vaadin-chart-series>
+ * <vaadin-chart-series values="[10, 20, 30, 40, 50]"></vaadin-chart-series>
  * ```
  *
  * which will add a new line series, where each value will be a data point.
@@ -40,18 +40,18 @@ export * from './vaadin-chart-series-mixin.js';
  * To create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:
  *
  * ```js
- *  const chart = \* a <vaadin-chart> reference *\
- *  const newSeries = document.createElement('vaadin-chart-series');
- *  newSeries.values = [10,20,30,40,50];
- *  chart.appendChild(newSeries);
+ * const chart = document.querySelector('vaadin-chart');
+ * const newSeries = document.createElement('vaadin-chart-series');
+ * newSeries.values = [10, 20, 30, 40, 50];
+ * chart.appendChild(newSeries);
  * ```
  *
  * In order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:
  *
  * ```js
- *  const chart = \* a <vaadin-chart> reference *\
- *  const seriesToBeRemoved = \* a <vaadin-chart-series> reference to remove*\
- *  chart.removeChild(seriesToBeRemoved);
+ * const chart = document.querySelector('vaadin-chart');
+ * const seriesToBeRemoved = chart.querySelector('vaadin-chart-series');
+ * chart.removeChild(seriesToBeRemoved);
  * ```
  */
 declare class ChartSeries extends ChartSeriesMixin(HTMLElement) {}

package/src/vaadin-chart-series.js

@@ -21,15 +21,15 @@ import { ChartSeriesMixin } from './vaadin-chart-series-mixin.js';
  * To use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:
  *
  * ```html
- *  <vaadin-chart>
- *    <vaadin-chart-series></vaadin-chart-series>
- *  </vaadin-chart>
+ * <vaadin-chart>
+ *   <vaadin-chart-series></vaadin-chart-series>
+ * </vaadin-chart>
  * ```
  *
  * `<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:
  *
  * ```html
- *  <vaadin-chart-series values="[10,20,30,40,50]"></vaadin-chart-series>
+ * <vaadin-chart-series values="[10, 20, 30, 40, 50]"></vaadin-chart-series>
  * ```
  *
  * which will add a new line series, where each value will be a data point.
@@ -42,18 +42,18 @@ import { ChartSeriesMixin } from './vaadin-chart-series-mixin.js';
  * To create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:
  *
  * ```js
- *  const chart = \* a <vaadin-chart> reference *\
- *  const newSeries = document.createElement('vaadin-chart-series');
- *  newSeries.values = [10,20,30,40,50];
- *  chart.appendChild(newSeries);
+ * const chart = document.querySelector('vaadin-chart');
+ * const newSeries = document.createElement('vaadin-chart-series');
+ * newSeries.values = [10, 20, 30, 40, 50];
+ * chart.appendChild(newSeries);
  * ```
  *
  * In order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:
  *
  * ```js
- *  const chart = \* a <vaadin-chart> reference *\
- *  const seriesToBeRemoved = \* a <vaadin-chart-series> reference to remove*\
- *  chart.removeChild(seriesToBeRemoved);
+ * const chart = document.querySelector('vaadin-chart');
+ * const seriesToBeRemoved = chart.querySelector('vaadin-chart-series');
+ * chart.removeChild(seriesToBeRemoved);
  * ```
  *
  * @customElement

package/src/vaadin-chart.d.ts

@@ -21,89 +21,67 @@ export * from './vaadin-chart-mixin.js';
  * There are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.
  * Note that you can make use of all APIs in your element.
  *
- * #### Configuring your chart using HTML API
+ * #### Using HTML API
  *
  * `vaadin-chart` has a set of attributes to make it easier for you to customize your chart.
  *
  * ```html
- *  <vaadin-chart title="The chart title" subtitle="The chart subtitle">
- *    <vaadin-chart-series
- *          type="column"
- *          title="The series title"
- *          values="[10,20,30]">
- *    </vaadin-chart-series>
- *  </vaadin-chart>
+ * <vaadin-chart title="The chart title" subtitle="The chart subtitle">
+ *   <vaadin-chart-series
+ *     type="column"
+ *     title="The series title"
+ *     values="[10, 20, 30]"
+ *   ></vaadin-chart-series>
+ * </vaadin-chart>
  * ```
  *
  * > Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you
  * > have to set it as the default series type on `<vaadin-chart>` in order to work properly.
  *
- * #### Configuring your chart using JS API
+ * #### Using JS API
+ *
+ * Use [`configuration`](#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:
  *
- * 1. Set an id for the `<vaadin-chart>` in the template
- * ```html
- *     <vaadin-chart id="mychart"></vaadin-chart>
- * ```
- * 1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data
- * ```js
- * initChartWithJSApi() {
- *     requestAnimationFrame(() => {
- *        const configuration = this.$.mychart.configuration;
- *        configuration.setTitle({ text: 'The chart title' });
- *        // By default there is one X axis, it is referenced by configuration.xAxis[0].
- *        configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
- *        configuration.addSeries({
- *            type: 'column',
- *            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]
- *        });
- *     });
- * }
- * ```
- * 1. Call that function from connectedCallback (when the element is added to a document)
  * ```js
- * connectedCallback() {
- *     super.connectedCallback();
- *     this.initChartWithJSApi();
- * }
+ * const chart = document.querySelector('vaadin-chart');
+ *
+ * // Wait for default configuration to be ready
+ * requestAnimationFrame(() => {
+ *   const configuration = chart.configuration;
+ *   configuration.setTitle({ text: 'The chart title' });
+ *   // By default there is one X axis, it is referenced by configuration.xAxis[0].
+ *   configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+ *   configuration.addSeries({
+ *     type: 'column',
+ *     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]
+ *   });
+ * });
  * ```
  *
- * #### Configuring your chart using JS JSON API
+ * #### Using JS JSON API
  *
- * JS JSON API is a simple alternative to the JS API.
+ * Use [`updateConfiguration`](#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:
  *
- * 1. Set an id for the `<vaadin-chart>` in the template
- * ```html
- *     <vaadin-chart id="mychart"></vaadin-chart>
- * ```
- * 1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data
- * ```js
- * initChartWithJSJSONApi() {
- *     this.$.mychart.updateConfiguration({
- *       title: {
- *         text: 'The chart title'
- *       },
- *       subtitle: {
- *         text: 'Subtitle'
- *       },
- *       xAxis: {
- *         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
- *       },
- *       series: [{
- *         type: 'column',
- *         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]
- *       }]
- *     });
- * }
- * ```
- * 1. Call that function from connectedCallback (when the element is added to a document)
  * ```js
- * connectedCallback() {
- *     super.connectedCallback();
- *     this.initChartWithJSJSONApi();
- * }
+ * const chart = document.querySelector('vaadin-chart');
+ * chart.updateConfiguration({
+ *   title: {
+ *     text: 'The chart title'
+ *   },
+ *   subtitle: {
+ *     text: 'Subtitle'
+ *   },
+ *   xAxis: {
+ *     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ *   },
+ *   series: [{
+ *     type: 'column',
+ *     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]
+ *   }]
+ * });
  * ```
  *
- * It should be noted that chart style customization cannot be done via the JS or JSON API.
+ * **Note:** chart style customization cannot be done via the JS or JSON API.
  * Styling properties in the JSON configuration will be ignored. The following section discusses chart styling.
  *
  * ### CSS Styling

package/src/vaadin-chart.js

@@ -26,89 +26,67 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
  * There are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.
  * Note that you can make use of all APIs in your element.
  *
- * #### Configuring your chart using HTML API
+ * #### Using HTML API
  *
  * `vaadin-chart` has a set of attributes to make it easier for you to customize your chart.
  *
  * ```html
- *  <vaadin-chart title="The chart title" subtitle="The chart subtitle">
- *    <vaadin-chart-series
- *          type="column"
- *          title="The series title"
- *          values="[10,20,30]">
- *    </vaadin-chart-series>
- *  </vaadin-chart>
+ * <vaadin-chart title="The chart title" subtitle="The chart subtitle">
+ *   <vaadin-chart-series
+ *     type="column"
+ *     title="The series title"
+ *     values="[10, 20, 30]"
+ *   ></vaadin-chart-series>
+ * </vaadin-chart>
  * ```
  *
  * > Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you
  * > have to set it as the default series type on `<vaadin-chart>` in order to work properly.
  *
- * #### Configuring your chart using JS API
+ * #### Using JS API
+ *
+ * Use [`configuration`](#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:
  *
- * 1. Set an id for the `<vaadin-chart>` in the template
- * ```html
- *     <vaadin-chart id="mychart"></vaadin-chart>
- * ```
- * 1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data
- * ```js
- * initChartWithJSApi() {
- *     requestAnimationFrame(() => {
- *        const configuration = this.$.mychart.configuration;
- *        configuration.setTitle({ text: 'The chart title' });
- *        // By default there is one X axis, it is referenced by configuration.xAxis[0].
- *        configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
- *        configuration.addSeries({
- *            type: 'column',
- *            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]
- *        });
- *     });
- * }
- * ```
- * 1. Call that function from connectedCallback (when the element is added to a document)
  * ```js
- * connectedCallback() {
- *     super.connectedCallback();
- *     this.initChartWithJSApi();
- * }
+ * const chart = document.querySelector('vaadin-chart');
+ *
+ * // Wait for default configuration to be ready
+ * requestAnimationFrame(() => {
+ *   const configuration = chart.configuration;
+ *   configuration.setTitle({ text: 'The chart title' });
+ *   // By default there is one X axis, it is referenced by configuration.xAxis[0].
+ *   configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+ *   configuration.addSeries({
+ *     type: 'column',
+ *     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]
+ *   });
+ * });
  * ```
  *
- * #### Configuring your chart using JS JSON API
+ * #### Using JS JSON API
  *
- * JS JSON API is a simple alternative to the JS API.
+ * Use [`updateConfiguration`](#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:
  *
- * 1. Set an id for the `<vaadin-chart>` in the template
- * ```html
- *     <vaadin-chart id="mychart"></vaadin-chart>
- * ```
- * 1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data
- * ```js
- * initChartWithJSJSONApi() {
- *     this.$.mychart.updateConfiguration({
- *       title: {
- *         text: 'The chart title'
- *       },
- *       subtitle: {
- *         text: 'Subtitle'
- *       },
- *       xAxis: {
- *         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
- *       },
- *       series: [{
- *         type: 'column',
- *         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]
- *       }]
- *     });
- * }
- * ```
- * 1. Call that function from connectedCallback (when the element is added to a document)
  * ```js
- * connectedCallback() {
- *     super.connectedCallback();
- *     this.initChartWithJSJSONApi();
- * }
+ * const chart = document.querySelector('vaadin-chart');
+ * chart.updateConfiguration({
+ *   title: {
+ *     text: 'The chart title'
+ *   },
+ *   subtitle: {
+ *     text: 'Subtitle'
+ *   },
+ *   xAxis: {
+ *     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ *   },
+ *   series: [{
+ *     type: 'column',
+ *     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]
+ *   }]
+ * });
  * ```
  *
- * It should be noted that chart style customization cannot be done via the JS or JSON API.
+ * **Note:** chart style customization cannot be done via the JS or JSON API.
  * Styling properties in the JSON configuration will be ignored. The following section discusses chart styling.
  *
  * ### CSS Styling

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.0.0-alpha12",
+  "version": "25.0.0-alpha14",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-chart-series",
-          "description": "`<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.\n\n### Basic use\n\nTo use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:\n\n```html\n <vaadin-chart>\n   <vaadin-chart-series></vaadin-chart-series>\n </vaadin-chart>\n```\n\n`<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:\n\n```html\n <vaadin-chart-series values=\"[10,20,30,40,50]\"></vaadin-chart-series>\n```\n\nwhich will add a new line series, where each value will be a data point.\nLook for the Properties session to see all available attributes.\n\n### Dynamically adding and removing series\n\nYou are also able to add and remove series by using DOM API.\n\nTo create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:\n\n```js\n const chart = \\* a <vaadin-chart> reference *\\\n const newSeries = document.createElement('vaadin-chart-series');\n newSeries.values = [10,20,30,40,50];\n chart.appendChild(newSeries);\n```\n\nIn order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:\n\n```js\n const chart = \\* a <vaadin-chart> reference *\\\n const seriesToBeRemoved = \\* a <vaadin-chart-series> reference to remove*\\\n chart.removeChild(seriesToBeRemoved);\n```",
+          "description": "`<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.\n\n### Basic use\n\nTo use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:\n\n```html\n<vaadin-chart>\n  <vaadin-chart-series></vaadin-chart-series>\n</vaadin-chart>\n```\n\n`<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:\n\n```html\n<vaadin-chart-series values=\"[10, 20, 30, 40, 50]\"></vaadin-chart-series>\n```\n\nwhich will add a new line series, where each value will be a data point.\nLook for the Properties session to see all available attributes.\n\n### Dynamically adding and removing series\n\nYou are also able to add and remove series by using DOM API.\n\nTo create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nconst newSeries = document.createElement('vaadin-chart-series');\nnewSeries.values = [10, 20, 30, 40, 50];\nchart.appendChild(newSeries);\n```\n\nIn order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nconst seriesToBeRemoved = chart.querySelector('vaadin-chart-series');\nchart.removeChild(seriesToBeRemoved);\n```",
           "attributes": [
             {
               "name": "value-min",
@@ -235,7 +235,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#### 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.",
+          "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.0.0-alpha14/#/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.0.0-alpha14/#/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.0.0-alpha12",
+  "version": "25.0.0-alpha14",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-chart-series",
-          "description": "`<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.\n\n### Basic use\n\nTo use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:\n\n```html\n <vaadin-chart>\n   <vaadin-chart-series></vaadin-chart-series>\n </vaadin-chart>\n```\n\n`<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:\n\n```html\n <vaadin-chart-series values=\"[10,20,30,40,50]\"></vaadin-chart-series>\n```\n\nwhich will add a new line series, where each value will be a data point.\nLook for the Properties session to see all available attributes.\n\n### Dynamically adding and removing series\n\nYou are also able to add and remove series by using DOM API.\n\nTo create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:\n\n```js\n const chart = \\* a <vaadin-chart> reference *\\\n const newSeries = document.createElement('vaadin-chart-series');\n newSeries.values = [10,20,30,40,50];\n chart.appendChild(newSeries);\n```\n\nIn order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:\n\n```js\n const chart = \\* a <vaadin-chart> reference *\\\n const seriesToBeRemoved = \\* a <vaadin-chart-series> reference to remove*\\\n chart.removeChild(seriesToBeRemoved);\n```",
+          "description": "`<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.\n\n### Basic use\n\nTo use `<vaadin-chart-series>`, add it inside a `<vaadin-chart>` element:\n\n```html\n<vaadin-chart>\n  <vaadin-chart-series></vaadin-chart-series>\n</vaadin-chart>\n```\n\n`<vaadin-chart-series>` accepts `values` as an array attribute, so you can add it to your element definition:\n\n```html\n<vaadin-chart-series values=\"[10, 20, 30, 40, 50]\"></vaadin-chart-series>\n```\n\nwhich will add a new line series, where each value will be a data point.\nLook for the Properties session to see all available attributes.\n\n### Dynamically adding and removing series\n\nYou are also able to add and remove series by using DOM API.\n\nTo create a new series, call `document.createElement('vaadin-chart-series')` and append it to your `<vaadin-chart>`:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nconst newSeries = document.createElement('vaadin-chart-series');\nnewSeries.values = [10, 20, 30, 40, 50];\nchart.appendChild(newSeries);\n```\n\nIn order to remove it, you should use the series to be removed as a reference for the `#removeChild()` call:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nconst seriesToBeRemoved = chart.querySelector('vaadin-chart-series');\nchart.removeChild(seriesToBeRemoved);\n```",
           "extension": true,
           "attributes": [
             {
@@ -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#### 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.",
+          "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.0.0-alpha14/#/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.0.0-alpha14/#/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": [
             {