@vaadin/charts 25.0.0-alpha9 → 25.0.0-beta2

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

@@ -85,6 +85,11 @@ export type ChartRedrawEvent = CustomEvent<{ chart: HighchartsChart; originalEve
  */
 export type ChartSelectionEvent = CustomEvent<{ chart: HighchartsChart; originalEvent: ChartEvent }>;
 
+/**
+ * Fired when the chart finishes resizing.
+ */
+export type ChartEndResizeEvent = CustomEvent<{ chart: HighchartsChart; originalEvent: ChartEvent }>;
+
 /**
  * Fired when the series has finished its initial animation.
  */
@@ -181,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;
@@ -192,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;
@@ -227,6 +232,8 @@ export interface ChartCustomEventMap {
 
   'chart-selection': ChartSelectionEvent;
 
+  'chart-end-resize': ChartEndResizeEvent;
+
   'series-after-animate': ChartSeriesAfterAnimateEvent;
 
   'series-checkbox-click': ChartSeriesCheckboxClickEvent;

package/src/vaadin-chart-mixin.js

@@ -28,12 +28,14 @@ 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';
 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 */
@@ -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
      */
@@ -551,6 +584,14 @@ export const ChartMixin = (superClass) =>
          * @param {Object} chart Chart object where the event was sent from
          */
         selection: 'chart-selection',
+
+        /**
+         * Fired when the chart finishes resizing.
+         * @event chart-end-resize
+         * @param {Object} detail.originalEvent object with details about the event sent
+         * @param {Object} chart Chart object where the event was sent from
+         */
+        endResize: 'chart-end-resize',
       };
     }
 
@@ -598,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.
@@ -646,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.
@@ -726,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
@@ -739,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
@@ -756,7 +795,6 @@ export const ChartMixin = (superClass) =>
         // 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;
         }
 
@@ -787,6 +825,16 @@ export const ChartMixin = (superClass) =>
       const { height, width } = contentRect;
       const { chartHeight, chartWidth } = this.configuration;
 
+      this.$.wrapper.style.minHeight = '';
+      // Use 1px as the threshold to align with Highcharts
+      if (this.$.wrapper.offsetHeight <= 1) {
+        this.$.wrapper.style.minHeight = `${chartHeight}px`;
+      }
+      this.$.wrapper.style.minWidth = '';
+      if (this.$.wrapper.offsetWidth <= 1) {
+        this.$.wrapper.style.minWidth = `${chartWidth}px`;
+      }
+
       if (height !== chartHeight || width !== chartWidth) {
         this.__reflow();
       }
@@ -907,6 +955,8 @@ export const ChartMixin = (superClass) =>
       } else {
         this.configuration = Highcharts.chart(this.$.chart, options);
       }
+
+      this.__forceResize();
     }
 
     /** @private */
@@ -920,7 +970,7 @@ export const ChartMixin = (superClass) =>
       super.disconnectedCallback();
 
       if (this.configuration) {
-        this._jsonConfigurationBuffer = this.configuration.userOptions;
+        this._jsonConfigurationBuffer = deepMerge({}, this.configuration.userOptions);
       }
 
       queueMicrotask(() => {
@@ -1112,6 +1162,7 @@ export const ChartMixin = (superClass) =>
       this.__initSeriesEventsListeners(configuration);
       this.__initPointsEventsListeners(configuration);
       this.__initAxisEventsListeners(configuration, true);
+      this.__initLegendItemClickEventListener(configuration);
       this.__initAxisEventsListeners(configuration, false);
     }
 
@@ -1130,6 +1181,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;
@@ -1202,62 +1286,15 @@ 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));
-
-            if (event.type === 'legendItemClick' && self._visibilityTogglingDisabled) {
-              return false;
-            }
           };
         }
       }
@@ -1279,7 +1316,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;
     }
 
@@ -1331,7 +1376,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;
       }
 
@@ -1340,7 +1385,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;
       }
 
@@ -1354,7 +1399,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;
       }
 
@@ -1655,18 +1700,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 = '';
       }
     }
 
@@ -1675,6 +1715,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-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
@@ -144,6 +122,7 @@ export * from './vaadin-chart-mixin.js';
  * @fires {CustomEvent} chart-drillupall - Fired after all the drilldown series has been drilled up.
  * @fires {CustomEvent} chart-redraw - Fired after the chart redraw.
  * @fires {CustomEvent} chart-selection - Fired when an area of the chart has been selected.
+ * @fires {CustomEvent} chart-end-resize - Fired when the chart finishes resizing.
  * @fires {CustomEvent} series-after-animate - Fired when the series has finished its initial animation.
  * @fires {CustomEvent} series-checkbox-click - Fired when the checkbox next to the series' name in the legend is clicked.
  * @fires {CustomEvent} series-click - Fired when the series is clicked.
@@ -163,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>(