@vaadin/charts 25.0.0-alpha16 → 25.0.0-alpha18

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

@@ -186,7 +186,7 @@ export type ChartPointDropEvent = CustomEvent<{ point: Point; originalEvent: Cha
 export type ChartPointDragEvent = CustomEvent<{ point: Point; originalEvent: ChartPointEvent }>;
 
 /**
- * Fired when when the minimum and maximum is set for the X axis.
+ * Fired when the minimum and maximum is set for the X axis.
  */
 export type ChartXaxesExtremesSetEvent = CustomEvent<{
   axis: Axis;
@@ -197,7 +197,7 @@ export type ChartXaxesExtremesSetEvent = CustomEvent<{
 }>;
 
 /**
- * Fired when when the minimum and maximum is set for the Y axis.
+ * Fired when the minimum and maximum is set for the Y axis.
  */
 export type ChartYaxesExtremesSetEvent = CustomEvent<{
   axis: Axis;

package/src/vaadin-chart-mixin.js

@@ -28,6 +28,8 @@ import 'highcharts/es-modules/masters/modules/xrange.src.js';
 import 'highcharts/es-modules/masters/modules/bullet.src.js';
 import 'highcharts/es-modules/masters/modules/gantt.src.js';
 import 'highcharts/es-modules/masters/modules/draggable-points.src.js';
+import KeyboardNavigation from 'highcharts/es-modules/Accessibility/KeyboardNavigation.js';
+import HTMLUtilities from 'highcharts/es-modules/Accessibility/Utils/HTMLUtilities.js';
 import Pointer from 'highcharts/es-modules/Core/Pointer.js';
 import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
@@ -57,7 +59,7 @@ Pointer.prototype.onDocumentMouseMove = function (e) {
   // If we're outside, hide the tooltip
   if (
     chartPosition &&
-    (!tooltip || !tooltip.isStickyOnContact()) &&
+    (!tooltip || !tooltip.isSticky) &&
     !chart.isInsidePlot(pEvt.chartX - chart.plotLeft, pEvt.chartY - chart.plotTop, {
       visiblePlotOnly: true,
     }) &&
@@ -68,6 +70,35 @@ Pointer.prototype.onDocumentMouseMove = function (e) {
   }
 };
 
+// As the `mouseup` event is attached to the document element, the target will reference
+// the instance of the `vaadin-chart` element instead of the element the event originated from.
+// That causes some mishbehaviors, e.g. in a drilldown series, clicking in the point does not
+// drills down the series in some cases.
+// Change to check for the first element in the composed path as the target of the event.
+// Workaround for https://github.com/highcharts/highcharts/issues/23490
+//
+// TODO: Remove this monkeypatch once the referenced issue is fixed
+const { simulatedEventTarget } = HTMLUtilities;
+KeyboardNavigation.prototype.onMouseUp = function (e) {
+  delete this.isClickingChart;
+  if (!this.keyboardReset && e.relatedTarget !== simulatedEventTarget) {
+    const chart = this.chart;
+    const target = e.composedPath()[0];
+    if (!target || !chart.container.contains(target)) {
+      const curMod = this.modules && this.modules[this.currentModuleIx || 0];
+      if (curMod && curMod.terminate) {
+        curMod.terminate();
+      }
+      this.currentModuleIx = 0;
+    }
+    if (chart.focusElement) {
+      chart.focusElement.removeFocusBorder();
+      delete chart.focusElement;
+    }
+    this.keyboardReset = true;
+  }
+};
+
 // Init Highcharts global language defaults
 // No data message should be empty by default
 Highcharts.setOptions({ lang: { noData: '' } });
@@ -301,11 +332,13 @@ export const ChartMixin = (superClass) =>
         args.forEach((arg) => inflateFunctions(arg));
         functionToCall.apply(this.configuration, args);
         if (redrawCharts) {
+          const lang = Highcharts.defaultOptions.lang;
           Highcharts.charts.forEach((c) => {
             // Ignore `undefined` values that are preserved in the array
             // after their corresponding chart instances are destroyed.
             // See https://github.com/vaadin/flow-components/issues/6607
             if (c !== undefined) {
+              c.time.lang = lang;
               c.redraw();
             }
           });
@@ -449,7 +482,7 @@ export const ChartMixin = (superClass) =>
       return options;
     }
 
-    /**
+    /*
      * Name of the chart events to add to the configuration and its corresponding event for the chart element
      * @private
      */
@@ -606,7 +639,6 @@ export const ChartMixin = (superClass) =>
          * @param {Object} detail.originalEvent object with details about the event sent
          * @param {Object} series Series object where the event was sent from
          */
-        legendItemClick: 'series-legend-item-click',
 
         /**
          * Fired when the mouses leave the graph.
@@ -654,7 +686,6 @@ export const ChartMixin = (superClass) =>
          * @param {Object} detail.originalEvent object with details about the event sent
          * @param {Object} point Point object where the event was sent from
          */
-        legendItemClick: 'point-legend-item-click',
 
         /**
          * Fired when the mouse leaves the area close to the point.
@@ -734,7 +765,7 @@ export const ChartMixin = (superClass) =>
     get __xAxesEventNames() {
       return {
         /**
-         * Fired when when the minimum and maximum is set for the x axis.
+         * Fired when the minimum and maximum is set for the x axis.
          * @event xaxes-extremes-set
          * @param {Object} detail.originalEvent object with details about the event sent
          * @param {Object} axis Point object where the event was sent from
@@ -747,7 +778,7 @@ export const ChartMixin = (superClass) =>
     get __yAxesEventNames() {
       return {
         /**
-         * Fired when when the minimum and maximum is set for the y axis.
+         * Fired when the minimum and maximum is set for the y axis.
          * @event yaxes-extremes-set
          * @param {Object} detail.originalEvent object with details about the event sent
          * @param {Object} axis Point object where the event was sent from
@@ -915,6 +946,8 @@ export const ChartMixin = (superClass) =>
       } else {
         this.configuration = Highcharts.chart(this.$.chart, options);
       }
+
+      this.__forceResize();
     }
 
     /** @private */
@@ -928,7 +961,7 @@ export const ChartMixin = (superClass) =>
       super.disconnectedCallback();
 
       if (this.configuration) {
-        this._jsonConfigurationBuffer = this.configuration.userOptions;
+        this._jsonConfigurationBuffer = deepMerge({}, this.configuration.userOptions);
       }
 
       queueMicrotask(() => {
@@ -1120,6 +1153,7 @@ export const ChartMixin = (superClass) =>
       this.__initSeriesEventsListeners(configuration);
       this.__initPointsEventsListeners(configuration);
       this.__initAxisEventsListeners(configuration, true);
+      this.__initLegendItemClickEventListener(configuration);
       this.__initAxisEventsListeners(configuration, false);
     }
 
@@ -1138,6 +1172,39 @@ export const ChartMixin = (superClass) =>
       this.__createEventListeners(this.__pointEventNames, configuration, 'plotOptions.series.point.events', 'point');
     }
 
+    /** @private */
+    __initLegendItemClickEventListener(configuration) {
+      const eventObject = this.__ensureObjectPath(configuration, 'legend.events');
+      eventObject.itemClick = (event) => {
+        const customEvent = {
+          bubbles: false,
+          composed: true,
+          detail: {
+            originalEvent: event,
+            legend: event.target,
+          },
+        };
+
+        // `event.legendItem` might be an object of type `Highcharts.Series`, `Highcharts.Point` or
+        // `Highcharts.LegendItemObject`. We care only about the first two to dispatch either a
+        // `series-legend-item-click` or `point-legend-item-click` event.
+        const legendItemMatch = [
+          { clazz: Highcharts.Series, type: 'series' },
+          { clazz: Highcharts.Point, type: 'point' },
+        ].find(({ clazz }) => event.legendItem instanceof clazz);
+
+        if (legendItemMatch) {
+          const { type: legendItemClickType } = legendItemMatch;
+          customEvent.detail[legendItemClickType] = event.legendItem;
+          this.dispatchEvent(new CustomEvent(`${legendItemClickType}-legend-item-click`, customEvent));
+
+          if (this._visibilityTogglingDisabled) {
+            return false;
+          }
+        }
+      };
+    }
+
     /** @private */
     __initAxisEventsListeners(configuration, isXAxis) {
       let eventNames, axes;
@@ -1219,10 +1286,6 @@ export const ChartMixin = (superClass) =>
             }
 
             self.dispatchEvent(new CustomEvent(eventList[key], customEvent));
-
-            if (event.type === 'legendItemClick' && self._visibilityTogglingDisabled) {
-              return false;
-            }
           };
         }
       }
@@ -1244,7 +1307,15 @@ export const ChartMixin = (superClass) =>
     }
 
     /** @private */
-    __hasConfigurationBuffer(path) {
+    __hasConfigurationBuffer(path, property) {
+      if (
+        property &&
+        path.startsWith(property) &&
+        this._jsonConfigurationBuffer &&
+        Array.isArray(this._jsonConfigurationBuffer[property])
+      ) {
+        return get(path.split('.')[1], this._jsonConfigurationBuffer[property][0]);
+      }
       return get(path, this._jsonConfigurationBuffer) !== undefined;
     }
 
@@ -1296,7 +1367,7 @@ export const ChartMixin = (superClass) =>
 
     /** @private */
     __updateCategories(categories, config) {
-      if (categories === undefined || !config || this.__hasConfigurationBuffer('xAxis.categories')) {
+      if (categories === undefined || !config || this.__hasConfigurationBuffer('xAxis.categories', 'xAxis')) {
         return;
       }
 
@@ -1305,7 +1376,7 @@ export const ChartMixin = (superClass) =>
 
     /** @private */
     __updateCategoryMax(max, config) {
-      if (max === undefined || !config || this.__hasConfigurationBuffer('xAxis.max')) {
+      if (max === undefined || !config || this.__hasConfigurationBuffer('xAxis.max', 'xAxis')) {
         return;
       }
 
@@ -1319,7 +1390,7 @@ export const ChartMixin = (superClass) =>
 
     /** @private */
     __updateCategoryMin(min, config) {
-      if (min === undefined || !config || this.__hasConfigurationBuffer('xAxis.min')) {
+      if (min === undefined || !config || this.__hasConfigurationBuffer('xAxis.min', 'xAxis')) {
         return;
       }
 
@@ -1620,18 +1691,13 @@ export const ChartMixin = (superClass) =>
 
       // If chart element is a flexible item the chartContainer should be flex too
       if (isFlex) {
-        this.$.chart.setAttribute('style', 'flex: 1; ');
-        let style = '';
-        if (this.hasAttribute('style')) {
-          style = this.getAttribute('style');
-          if (!style.endsWith(';')) {
-            style += ';';
-          }
-        }
-        style += 'display: flex;';
-        this.setAttribute('style', style);
+        this.style.display = 'flex';
+        this.$.wrapper.style.display = 'flex';
+        this.$.chart.style.flex = 1;
       } else {
-        this.$.chart.setAttribute('style', 'height:100%; width:100%;');
+        this.style.display = '';
+        this.$.wrapper.style.display = '';
+        this.$.chart.style.flex = '';
       }
     }
 
@@ -1640,6 +1706,30 @@ export const ChartMixin = (superClass) =>
       console.warn(`<vaadin-chart> Acceptable values for "${propertyName}" are ${acceptedValues}`);
     }
 
+    /**
+     * @private
+     * Workaround for https://github.com/highcharts/highcharts/issues/23443
+     * Forces a resize in the chart to make it calculate the labels positions
+     * correctly in a chart with "organization" series
+     *
+     * TODO: Remove when the related ticket is fixed
+     */
+    __forceResize() {
+      const chart = this.configuration;
+      const { options } = chart;
+      const hasOrganizationSeries =
+        options.chart.styledMode &&
+        (options.chart.type === 'organization' || options.series.some((series) => series.type === 'organization'));
+      if (!hasOrganizationSeries) {
+        return;
+      }
+
+      requestAnimationFrame(() => {
+        chart.setSize(chart.chartWidth - 10, chart.chartHeight);
+        chart.setSize(null, null);
+      });
+    }
+
     /** @private */
     __onRedraw() {
       this.__checkTurboMode();

package/src/vaadin-chart.d.ts

@@ -142,8 +142,8 @@ export * from './vaadin-chart-mixin.js';
  * @fires {CustomEvent} point-drag-start - Fired when starting to drag a point.
  * @fires {CustomEvent} point-drop - Fired when the point is dropped.
  * @fires {CustomEvent} point-drag - Fired while dragging a point.
- * @fires {CustomEvent} xaxes-extremes-set - Fired when when the minimum and maximum is set for the X axis.
- * @fires {CustomEvent} yaxes-extremes-set - Fired when when the minimum and maximum is set for the Y axis.
+ * @fires {CustomEvent} xaxes-extremes-set - Fired when the minimum and maximum is set for the X axis.
+ * @fires {CustomEvent} yaxes-extremes-set - Fired when the minimum and maximum is set for the Y axis.
  */
 declare class Chart extends ChartMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   addEventListener<K extends keyof ChartEventMap>(

package/src/vaadin-chart.js

@@ -147,8 +147,8 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
  * @fires {CustomEvent} point-drag-start - Fired when starting to drag a point.
  * @fires {CustomEvent} point-drop - Fired when the point is dropped.
  * @fires {CustomEvent} point-drag - Fired while dragging a point.
- * @fires {CustomEvent} xaxes-extremes-set - Fired when when the minimum and maximum is set for the X axis.
- * @fires {CustomEvent} yaxes-extremes-set - Fired when when the minimum and maximum is set for the Y axis.
+ * @fires {CustomEvent} xaxes-extremes-set - Fired when the minimum and maximum is set for the X axis.
+ * @fires {CustomEvent} yaxes-extremes-set - Fired when the minimum and maximum is set for the Y axis.
  *
  * @customElement
  * @extends HTMLElement
@@ -178,7 +178,9 @@ class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjec
   /** @protected */
   render() {
     return html`
-      <div id="chart"></div>
+      <div id="wrapper" style="height: 100%; width: 100%;">
+        <div id="chart" style="height: 100%; width: 100%;"></div>
+      </div>
       <slot id="slot"></slot>
     `;
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.0.0-alpha16",
+  "version": "25.0.0-alpha18",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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#### 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-alpha16/#/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-alpha16/#/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.0.0-alpha18/#/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-alpha18/#/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",
@@ -685,11 +685,11 @@
               },
               {
                 "name": "xaxes-extremes-set",
-                "description": "Fired when when the minimum and maximum is set for the x axis."
+                "description": "Fired when the minimum and maximum is set for the x axis."
               },
               {
                 "name": "yaxes-extremes-set",
-                "description": "Fired when when the minimum and maximum is set for the y axis."
+                "description": "Fired when the minimum and maximum is set for the y axis."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.0.0-alpha16",
+  "version": "25.0.0-alpha18",
   "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.0.0-alpha16/#/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-alpha16/#/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.0.0-alpha18/#/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-alpha18/#/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": [
             {
@@ -441,14 +441,14 @@
             },
             {
               "name": "@xaxes-extremes-set",
-              "description": "Fired when when the minimum and maximum is set for the x axis.",
+              "description": "Fired when the minimum and maximum is set for the x axis.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "@yaxes-extremes-set",
-              "description": "Fired when when the minimum and maximum is set for the y axis.",
+              "description": "Fired when the minimum and maximum is set for the y axis.",
               "value": {
                 "kind": "expression"
               }