@vaadin/charts 25.3.0-beta1 → 25.3.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "25.3.0-beta1",
+  "version": "25.3.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,17 +35,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.3.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-beta1",
+    "@vaadin/component-base": "25.3.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-beta2",
     "highcharts": "12.2.0",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-beta1",
-    "@vaadin/chai-plugins": "25.3.0-beta1",
-    "@vaadin/test-runner-commands": "25.3.0-beta1",
+    "@vaadin/aura": "25.3.0-beta2",
+    "@vaadin/chai-plugins": "25.3.0-beta2",
+    "@vaadin/test-runner-commands": "25.3.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-beta2",
     "sinon": "^22.0.0"
   },
   "cvdlName": "vaadin-chart",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
+  "gitHead": "d97ccbec217b60c39f3c8b2dd52473c79a48c8c1"
 }

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

@@ -21,9 +21,32 @@ import '@vaadin/component-base/src/styles/user-colors.js';
 import { css, unsafeCSS } from 'lit';
 import { addGlobalStyles } from '@vaadin/component-base/src/css-utils.js';
 
-/* Tooltip styles, to support `"tooltip": { "outside": true }` config option */
+const seriesColorTokens = Array.from(
+  { length: 10 },
+  (_, i) =>
+    `--_color-${i}: var(--highcharts-color-${i}, var(--vaadin-charts-color-${i}, var(--vaadin-user-color-${i})));`,
+).join('\n    ');
+
+// A non-split tooltip carries highcharts-color-N on the tooltip element itself,
+// a split one on its child boxes, so both selectors are needed.
+const seriesColorRules = Array.from(
+  { length: 10 },
+  (_, i) =>
+    `.highcharts-tooltip-container .highcharts-tooltip.highcharts-color-${i},
+    .highcharts-tooltip-container .highcharts-tooltip .highcharts-color-${i} { fill: var(--_color-${i}); stroke: var(--_color-${i}); }`,
+).join('\n');
+
+/* Emitted at both scopes, so it looks absent from upstream Highcharts. Do not prune. */
 // postcss-lit-disable-next-line
 const tooltipStyles = (scope) => css`
+  ${unsafeCSS(scope)} .highcharts-strong {
+    font-weight: bold;
+  }
+
+  ${unsafeCSS(scope)} .highcharts-emphasized {
+    font-style: italic;
+  }
+
   ${unsafeCSS(scope)} .highcharts-tooltip {
     cursor: default;
     pointer-events: none;
@@ -35,6 +58,8 @@ const tooltipStyles = (scope) => css`
   ${unsafeCSS(scope)} .highcharts-tooltip text,
   ${unsafeCSS(scope)} .highcharts-tooltip foreignObject span {
     fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-data-label, var(--vaadin-text-color)));
+    /* The tooltip carries the series color, and stroke inherits into the glyphs. */
+    stroke-width: 0;
   }
 
   ${unsafeCSS(scope)} .highcharts-tooltip .highcharts-tracker {
@@ -65,6 +90,12 @@ const tooltipStyles = (scope) => css`
 addGlobalStyles(
   'vaadin-charts-tooltip',
   css`
+    .highcharts-tooltip-container {
+      ${unsafeCSS(seriesColorTokens)}
+    }
+
+    ${unsafeCSS(seriesColorRules)}
+
     .highcharts-tooltip-container .highcharts-root {
       overflow: visible;
       font-size: var(--vaadin-charts-font-size, 0.75rem);
@@ -87,20 +118,13 @@ export const chartStyles = css`
     font-size: var(--vaadin-charts-font-size, 0.75rem);
     line-height: normal;
 
-    /* Needs to be a color, not a background image */
+    /* Needs to be a color, not a background image. A theme may set it to transparent. */
     --_bg: var(--vaadin-charts-background, var(--vaadin-background-color));
+    /* What elements drawn on the canvas read against. A transparent canvas has to
+       declare what shows through instead. */
+    --_surface: var(--vaadin-charts-surface, var(--_bg));
 
-    --_color-0: var(--highcharts-color-0, var(--vaadin-charts-color-0, var(--vaadin-user-color-0)));
-    --_color-1: var(--highcharts-color-1, var(--vaadin-charts-color-1, var(--vaadin-user-color-1)));
-    --_color-2: var(--highcharts-color-2, var(--vaadin-charts-color-2, var(--vaadin-user-color-2)));
-    --_color-3: var(--highcharts-color-3, var(--vaadin-charts-color-3, var(--vaadin-user-color-3)));
-    --_color-4: var(--highcharts-color-4, var(--vaadin-charts-color-4, var(--vaadin-user-color-4)));
-    --_color-5: var(--highcharts-color-5, var(--vaadin-charts-color-5, var(--vaadin-user-color-5)));
-    --_color-6: var(--highcharts-color-6, var(--vaadin-charts-color-6, var(--vaadin-user-color-6)));
-    --_color-7: var(--highcharts-color-7, var(--vaadin-charts-color-7, var(--vaadin-user-color-7)));
-    --_color-8: var(--highcharts-color-8, var(--vaadin-charts-color-8, var(--vaadin-user-color-8)));
-    --_color-9: var(--highcharts-color-9, var(--vaadin-charts-color-9, var(--vaadin-user-color-9)));
-
+    ${unsafeCSS(seriesColorTokens)}
     --_color-0-label: oklch(from var(--_color-0) clamp(0, (0.62 - l) * 1000, 1) 0 0);
     --_color-1-label: oklch(from var(--_color-1) clamp(0, (0.62 - l) * 1000, 1) 0 0);
     --_color-2-label: oklch(from var(--_color-2) clamp(0, (0.62 - l) * 1000, 1) 0 0);
@@ -118,7 +142,7 @@ export const chartStyles = css`
     --_label: var(--vaadin-charts-label, var(--vaadin-text-color));
     --_secondary-label: var(--vaadin-charts-secondary-label, var(--vaadin-text-color-secondary));
     --_disabled-label: var(--vaadin-charts-disabled-label, var(--vaadin-text-color-disabled));
-    --_point-border: var(--vaadin-charts-point-border, var(--_bg));
+    --_point-border: var(--vaadin-charts-point-border, var(--_surface));
     --_axis-line: var(--vaadin-charts-axis-line, var(--vaadin-border-color-secondary));
     --_axis-title: var(--vaadin-charts-axis-title, var(--_secondary-label));
     --_axis-label: var(--vaadin-charts-axis-label, var(--_secondary-label));
@@ -168,14 +192,6 @@ export const chartStyles = css`
     stroke-width: 0;
   }
 
-  :where([styled-mode]) .highcharts-strong {
-    font-weight: bold;
-  }
-
-  :where([styled-mode]) .highcharts-emphasized {
-    font-style: italic;
-  }
-
   :where([styled-mode]) .highcharts-anchor {
     cursor: pointer;
   }
@@ -478,7 +494,7 @@ export const chartStyles = css`
 
   :where([styled-mode]) .highcharts-markers {
     stroke-width: 1px;
-    stroke: var(--highcharts-background-color, var(--_bg));
+    stroke: var(--highcharts-background-color, var(--_surface));
   }
 
   :where([styled-mode])
@@ -717,7 +733,7 @@ export const chartStyles = css`
   /* Loading */
   :where([styled-mode]) .highcharts-loading {
     position: absolute;
-    background-color: var(--highcharts-background-color, var(--_bg));
+    background-color: var(--highcharts-background-color, var(--_surface));
     opacity: 0.5;
     text-align: center;
     z-index: 10;
@@ -761,7 +777,7 @@ export const chartStyles = css`
 
   /* Highcharts More and modules */
   :where([styled-mode]) .highcharts-boxplot-box {
-    fill: var(--highcharts-background-color, var(--_bg));
+    fill: var(--highcharts-background-color, var(--_surface));
   }
 
   :where([styled-mode]) .highcharts-boxplot-median {
@@ -856,7 +872,7 @@ export const chartStyles = css`
 
   :where([styled-mode]) .highcharts-navigator-handle {
     stroke: var(--highcharts-neutral-color-40, var(--_grid-line));
-    fill: var(--highcharts-neutral-color-5, var(--_bg));
+    fill: var(--highcharts-neutral-color-5, var(--_surface));
     cursor: ew-resize;
   }
 
@@ -900,7 +916,7 @@ export const chartStyles = css`
   }
 
   :where([styled-mode]) .highcharts-scrollbar-button {
-    fill: var(--highcharts-neutral-color-10, var(--_bg));
+    fill: var(--highcharts-neutral-color-10, var(--_surface));
     stroke: var(--highcharts-neutral-color-20);
     stroke-width: 1px;
   }
@@ -946,6 +962,7 @@ export const chartStyles = css`
     fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-button-label, var(--_label)));
   }
 
+  /* Inverts like vaadin-button[theme~='primary']. Lumo and Aura override both. */
   :where([styled-mode]) .highcharts-button-pressed {
     font-weight: bold;
     fill: var(--highcharts-highlight-color-10, var(--vaadin-charts-button-active-background, var(--_label)));
@@ -953,7 +970,7 @@ export const chartStyles = css`
   }
 
   :where([styled-mode]) .highcharts-button-pressed text {
-    fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-button-active-label, var(--_bg)));
+    fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-button-active-label, var(--_surface)));
     font-weight: bold;
   }
 
@@ -1006,7 +1023,7 @@ export const chartStyles = css`
   }
 
   :where([styled-mode]) .highcharts-crosshair-label text {
-    fill: var(--highcharts-background-color, var(--_bg));
+    fill: var(--highcharts-background-color, var(--_surface));
     font-size: 0.9em;
   }
 
@@ -1046,7 +1063,7 @@ export const chartStyles = css`
 
   :where([styled-mode]) .highcharts-flags-series .highcharts-point .highcharts-label-box {
     stroke: var(--highcharts-neutral-color-40, var(--_grid-line));
-    fill: var(--highcharts-background-color, var(--_bg));
+    fill: var(--highcharts-background-color, var(--_surface));
     transition: fill 250ms;
   }
 
@@ -1055,7 +1072,7 @@ export const chartStyles = css`
       --highcharts-neutral-color-100,
       color-mix(in srgb, var(--vaadin-charts-contrast, var(--_label)) 60%, transparent)
     );
-    fill: var(--highcharts-highlight-color-20, var(--_bg));
+    fill: var(--highcharts-highlight-color-20, var(--_surface));
   }
 
   :where([styled-mode]) .highcharts-flags-series .highcharts-point text {
@@ -1134,7 +1151,7 @@ export const chartStyles = css`
   /* Exporting module */
   :where([styled-mode]) .highcharts-contextbutton {
     /* Fill is needed to capture hover */
-    fill: var(--highcharts-background-color, var(--_bg));
+    fill: var(--highcharts-background-color, var(--_surface));
     stroke: none;
     stroke-linecap: round;
   }
@@ -1151,7 +1168,7 @@ export const chartStyles = css`
 
   :where([styled-mode]) .highcharts-menu {
     border: none;
-    background: var(--highcharts-background-color, var(--_bg));
+    background: var(--highcharts-background-color, var(--_surface));
     border-radius: 3px;
     padding: 0.5em;
     box-shadow: 3px 3px 10px #888;
@@ -1171,7 +1188,7 @@ export const chartStyles = css`
   }
 
   :where([styled-mode]) .highcharts-menu-item:hover {
-    background: var(--highcharts-neutral-color-5, var(--_bg));
+    background: var(--highcharts-neutral-color-5, var(--_surface));
   }
 
   /* Breadcrumbs */

package/src/vaadin-chart-mixin.js

@@ -724,7 +724,34 @@ export const ChartMixin = (superClass) =>
         this.configuration = Highcharts.chart(this.$.chart, options);
       }
 
-      this.__forceResize();
+      this.__syncOutsideTooltipColors();
+      this.__redrawOrganizationDataLabels();
+    }
+
+    /**
+     * A `tooltip: { outside: true }` tooltip renders in `document.body`, so it
+     * inherits neither the palette a theme scopes to `vaadin-chart` nor any
+     * `--vaadin-charts-color-*` set on this element. Copy the resolved series
+     * colours onto its container instead.
+     *
+     * @private
+     */
+    __syncOutsideTooltipColors() {
+      const { tooltip } = this.configuration;
+      if (!tooltip || !tooltip.outside) {
+        return;
+      }
+
+      Highcharts.addEvent(tooltip, 'refresh', () => {
+        const { container } = tooltip;
+        if (!container) {
+          return;
+        }
+        const style = getComputedStyle(this);
+        for (let i = 0; i < 10; i++) {
+          container.style.setProperty(`--_color-${i}`, style.getPropertyValue(`--_color-${i}`));
+        }
+      });
     }
 
     /** @protected */
@@ -1480,24 +1507,26 @@ export const ChartMixin = (superClass) =>
     /**
      * @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
+     * In styled mode the label CSS is not applied yet when "organization" data
+     * labels are first measured, so they need a second measurement pass.
      *
      * 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) {
+    __redrawOrganizationDataLabels() {
+      if (!this.configuration.options.chart.styledMode) {
         return;
       }
 
+      // Series declared as <vaadin-chart-series> children are not on the chart yet,
+      // so the organization check waits for the frame too. Reading the chart there
+      // rather than capturing it also keeps a pending frame from holding a
+      // destroyed chart alive.
       requestAnimationFrame(() => {
-        chart.setSize(chart.chartWidth - 10, chart.chartHeight);
-        chart.setSize(null, null);
+        this.configuration?.series.forEach((series) => {
+          if (series.type === 'organization') {
+            series.drawDataLabels?.();
+          }
+        });
       });
     }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "25.3.0-beta1",
+  "version": "25.3.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -206,7 +206,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.3.0-beta1/#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\n\n// Wait for default configuration to be ready\nrequestAnimationFrame(() => {\n  const configuration = chart.configuration;\n  configuration.setTitle({ text: 'The chart title' });\n  // By default there is one X axis, it is referenced by configuration.xAxis[0].\n  configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n  configuration.addSeries({\n    type: 'column',\n    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n  });\n});\n```\n\n#### Using JS JSON API\n\nUse [`updateConfiguration`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nchart.updateConfiguration({\n  title: {\n    text: 'The chart title'\n  },\n  subtitle: {\n    text: 'Subtitle'\n  },\n  xAxis: {\n    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n  },\n  series: [{\n    type: 'column',\n    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n  }]\n});\n```\n\n**Note:** chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
+          "description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n  <vaadin-chart-series\n    type=\"column\"\n    title=\"The series title\"\n    values=\"[10, 20, 30]\"\n  ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta2/#/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.3.0-beta2/#/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.3.0-beta1",
+  "version": "25.3.0-beta2",
   "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.3.0-beta1/#/elements/vaadin-chart#property-configuration) property to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\n\n// Wait for default configuration to be ready\nrequestAnimationFrame(() => {\n  const configuration = chart.configuration;\n  configuration.setTitle({ text: 'The chart title' });\n  // By default there is one X axis, it is referenced by configuration.xAxis[0].\n  configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n  configuration.addSeries({\n    type: 'column',\n    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n  });\n});\n```\n\n#### Using JS JSON API\n\nUse [`updateConfiguration`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-chart#method-updateConfiguration) method to set chart title, categories and data:\n\n```js\nconst chart = document.querySelector('vaadin-chart');\nchart.updateConfiguration({\n  title: {\n    text: 'The chart title'\n  },\n  subtitle: {\n    text: 'Subtitle'\n  },\n  xAxis: {\n    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n  },\n  series: [{\n    type: 'column',\n    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n  }]\n});\n```\n\n**Note:** chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
+          "description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n<vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n  <vaadin-chart-series\n    type=\"column\"\n    title=\"The series title\"\n    values=\"[10, 20, 30]\"\n  ></vaadin-chart-series>\n</vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Using JS API\n\nUse [`configuration`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta2/#/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.3.0-beta2/#/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": [
             {