@vaadin/charts 24.8.4 → 25.0.0-alpha10

package/src/styles/vaadin-chart-core-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { CSSResult } from 'lit';
+
+export const chartStyles: CSSResult;

package/{theme/vaadin-chart-base-theme.js → src/styles/vaadin-chart-core-styles.js}

@@ -16,18 +16,26 @@
  *
  * License: www.highcharts.com/license
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 /* When updating this file do not override vaadin-charts custom properties section */
 
-const chartBaseTheme = css`
+export const chartStyles = css`
   :host {
-    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol';
     font-size: 12px;
     line-height: normal;
   }
 
+  :host([hidden]) {
+    display: none !important;
+  }
+
   .highcharts-container {
     position: relative;
     overflow: hidden;
@@ -125,7 +133,7 @@ const chartBaseTheme = css`
   }
 
   :where([styled-mode]) .highcharts-xaxis-grid .highcharts-grid-line {
-    stroke-width: var(--vaadin-charts-xaxis-line-width, 0px);
+    stroke-width: var(--vaadin-charts-xaxis-line-width, 0);
   }
 
   :where([styled-mode]) .highcharts-tick {
@@ -171,9 +179,6 @@ const chartBaseTheme = css`
     pointer-events: none;
     white-space: nowrap;
     transition: stroke 150ms;
-  }
-
-  :where([styled-mode]) .highcharts-tooltip {
     filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05)) !important;
   }
 
@@ -444,7 +449,7 @@ const chartBaseTheme = css`
   }
 
   :where([styled-mode]) .highcharts-treemap-series .highcharts-point-hover {
-    stroke-width: 0px;
+    stroke-width: 0;
     stroke: var(--vaadin-charts-background, #fff);
     fill-opacity: 0.75;
     transition:
@@ -508,7 +513,7 @@ const chartBaseTheme = css`
   }
 
   :where([styled-mode]) .highcharts-legend-item > .highcharts-point {
-    stroke-width: 0px;
+    stroke-width: 0;
   }
 
   :where([styled-mode]) .highcharts-legend-item:hover text {
@@ -753,7 +758,7 @@ const chartBaseTheme = css`
   :where([styled-mode]) .highcharts-button-hover {
     transition: fill 0ms;
     fill: var(--vaadin-charts-button-hover-background, hsla(214, 90%, 52%, 0.1));
-    stroke-width: 0px;
+    stroke-width: 0;
   }
 
   :where([styled-mode]) .highcharts-button-hover text {
@@ -903,7 +908,7 @@ const chartBaseTheme = css`
 
   :where([styled-mode]) .highcharts-coloraxis-marker {
     fill: var(--vaadin-charts-axis-label, hsla(214, 42%, 18%, 0.72));
-    stroke-width: 0px;
+    stroke-width: 0;
   }
 
   :where([styled-mode]) .highcharts-null-point {
@@ -1053,10 +1058,6 @@ const chartBaseTheme = css`
   /* https://github.com/highcharts/highcharts/issues/16282 */
   /* without this the resize callback always calls __reflow */
   ul[aria-hidden='false'] {
-    margin: 0px;
+    margin: 0;
   }
 `;
-
-registerStyles('vaadin-chart', chartBaseTheme, { moduleId: 'vaadin-chart-base-theme' });
-
-export { chartBaseTheme };

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

@@ -48,10 +48,6 @@ export declare class ChartSeriesMixinClass {
    *   - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`
    *
    *  See more in [API Site](https://api.highcharts.com/highcharts/series)
-   *
-   * Note that you should always use [Polymer API](https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation)
-   * to mutate the values array in order to make the component aware of the
-   * change and be able to synchronize it.
    */
   values: ChartSeriesValues | null;
 

package/src/vaadin-chart-series-mixin.js

@@ -26,9 +26,6 @@ export const ChartSeriesMixin = (superClass) =>
          *
          *  See more in [API Site](https://api.highcharts.com/highcharts/series)
          *
-         * Note that you should always use [Polymer API](https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation)
-         * to mutate the values array in order to make the component aware of the
-         * change and be able to synchronize it.
          * @type {ChartSeriesValues}
          */
         values: {

package/src/vaadin-chart-series.js

@@ -8,8 +8,9 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ChartSeriesMixin } from './vaadin-chart-series-mixin.js';
 
 /**
@@ -59,7 +60,7 @@ import { ChartSeriesMixin } from './vaadin-chart-series-mixin.js';
  * @extends HTMLElement
  * @mixes ChartSeriesMixin
  */
-class ChartSeries extends ChartSeriesMixin(PolymerElement) {
+class ChartSeries extends ChartSeriesMixin(PolylitMixin(LitElement)) {
   static get is() {
     return 'vaadin-chart-series';
   }

package/src/vaadin-chart.d.ts

@@ -132,11 +132,6 @@ export * from './vaadin-chart-mixin.js';
  *
  * For example `--vaadin-charts-color-0` sets the color of the first series on a chart.
  *
- * ### Validating your License
- *
- * When using Vaadin Charts in a development environment, you will see a pop-up that asks you
- * to validate your license by signing in to vaadin.com.
- *
  * @fires {CustomEvent} chart-add-series - Fired when a new series is added.
  * @fires {CustomEvent} chart-after-export - Fired after a chart is exported.
  * @fires {CustomEvent} chart-after-print - Fired after a chart is printed.

package/src/vaadin-chart.js

@@ -9,10 +9,13 @@
  * license.
  */
 import './vaadin-chart-series.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { chartStyles } from './styles/vaadin-chart-core-styles.js';
 import { ChartMixin } from './vaadin-chart-mixin.js';
 
 /**
@@ -134,11 +137,6 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
  *
  * For example `--vaadin-charts-color-0` sets the color of the first series on a chart.
  *
- * ### Validating your License
- *
- * When using Vaadin Charts in a development environment, you will see a pop-up that asks you
- * to validate your license by signing in to vaadin.com.
- *
  * @fires {CustomEvent} chart-add-series - Fired when a new series is added.
  * @fires {CustomEvent} chart-after-export - Fired after a chart is exported.
  * @fires {CustomEvent} chart-after-print - Fired after a chart is printed.
@@ -179,25 +177,7 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          width: 100%;
-          overflow: hidden;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
-      <div id="chart"></div>
-      <slot id="slot"></slot>
-    `;
-  }
-
+class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-chart';
   }
@@ -205,6 +185,24 @@ class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get cvdlName() {
     return 'vaadin-chart';
   }
+
+  static get styles() {
+    return chartStyles;
+  }
+
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="chart"></div>
+      <slot id="slot"></slot>
+    `;
+  }
 }
 
 defineCustomElement(Chart);

package/theme/lumo/vaadin-chart-styles.d.ts

@@ -1,4 +1,3 @@
-import '../vaadin-chart-base-theme.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 declare const chartColors: import("lit").CSSResult;

package/theme/lumo/vaadin-chart-styles.js

@@ -1,4 +1,3 @@
-import '../vaadin-chart-base-theme.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -119,7 +119,7 @@
             "properties": [
               {
                 "name": "values",
-                "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n  - An array of numerical values `[y0, y1, y2, y3,...]`\n  - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n  - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)\n\nNote that you should always use [Polymer API](https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation)\nto mutate the values array in order to make the component aware of the\nchange and be able to synchronize it.",
+                "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n  - An array of numerical values `[y0, y1, y2, y3,...]`\n  - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n  - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)",
                 "value": {
                   "type": [
                     "ChartSeriesValues"
@@ -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.\n\n### Validating your License\n\nWhen using Vaadin Charts in a development environment, you will see a pop-up that asks you\nto validate your license by signing in to vaadin.com.",
+          "description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Configuring your chart using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n <vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n   <vaadin-chart-series\n         type=\"column\"\n         title=\"The series title\"\n         values=\"[10,20,30]\">\n   </vaadin-chart-series>\n </vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Configuring your chart using JS API\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data\n```js\ninitChartWithJSApi() {\n    requestAnimationFrame(() => {\n       const configuration = this.$.mychart.configuration;\n       configuration.setTitle({ text: 'The chart title' });\n       // By default there is one X axis, it is referenced by configuration.xAxis[0].\n       configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n       configuration.addSeries({\n           type: 'column',\n           data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n       });\n    });\n}\n```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSApi();\n}\n```\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data\n```js\ninitChartWithJSJSONApi() {\n    this.$.mychart.updateConfiguration({\n      title: {\n        text: 'The chart title'\n      },\n      subtitle: {\n        text: 'Subtitle'\n      },\n      xAxis: {\n        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n      },\n      series: [{\n        type: 'column',\n        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n      }]\n    });\n}\n```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSJSONApi();\n}\n```\n\nIt should be noted that chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
           "attributes": [
             {
               "name": "category-max",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -21,7 +21,7 @@
           "attributes": [
             {
               "name": ".values",
-              "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n  - An array of numerical values `[y0, y1, y2, y3,...]`\n  - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n  - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)\n\nNote that you should always use [Polymer API](https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation)\nto mutate the values array in order to make the component aware of the\nchange and be able to synchronize it.",
+              "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n  - An array of numerical values `[y0, y1, y2, y3,...]`\n  - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n  - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)",
               "value": {
                 "kind": "expression"
               }
@@ -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.\n\n### Validating your License\n\nWhen using Vaadin Charts in a development environment, you will see a pop-up that asks you\nto validate your license by signing in to vaadin.com.",
+          "description": "`<vaadin-chart>` is a Web Component for creating high quality charts.\n\n### Basic use\n\nThere are two ways of configuring your `<vaadin-chart>` element: **HTML API**, **JS API** and **JSON API**.\nNote that you can make use of all APIs in your element.\n\n#### Configuring your chart using HTML API\n\n`vaadin-chart` has a set of attributes to make it easier for you to customize your chart.\n\n```html\n <vaadin-chart title=\"The chart title\" subtitle=\"The chart subtitle\">\n   <vaadin-chart-series\n         type=\"column\"\n         title=\"The series title\"\n         values=\"[10,20,30]\">\n   </vaadin-chart-series>\n </vaadin-chart>\n```\n\n> Note that while you can set type for each series individually, for some types, such as `'bar'`, `'gauge'` and `'solidgauge'`, you\n> have to set it as the default series type on `<vaadin-chart>` in order to work properly.\n\n#### Configuring your chart using JS API\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `configuration` property (JS Api) to set chart title, categories and data\n```js\ninitChartWithJSApi() {\n    requestAnimationFrame(() => {\n       const configuration = this.$.mychart.configuration;\n       configuration.setTitle({ text: 'The chart title' });\n       // By default there is one X axis, it is referenced by configuration.xAxis[0].\n       configuration.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);\n       configuration.addSeries({\n           type: 'column',\n           data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n       });\n    });\n}\n```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSApi();\n}\n```\n\n#### Configuring your chart using JS JSON API\n\nJS JSON API is a simple alternative to the JS API.\n\n1. Set an id for the `<vaadin-chart>` in the template\n```html\n    <vaadin-chart id=\"mychart\"></vaadin-chart>\n```\n1. Add a function that uses `updateConfiguration` method (JS JSON Api) to set chart title, categories and data\n```js\ninitChartWithJSJSONApi() {\n    this.$.mychart.updateConfiguration({\n      title: {\n        text: 'The chart title'\n      },\n      subtitle: {\n        text: 'Subtitle'\n      },\n      xAxis: {\n        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n      },\n      series: [{\n        type: 'column',\n        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]\n      }]\n    });\n}\n```\n1. Call that function from connectedCallback (when the element is added to a document)\n```js\nconnectedCallback() {\n    super.connectedCallback();\n    this.initChartWithJSJSONApi();\n}\n```\n\nIt should be noted that chart style customization cannot be done via the JS or JSON API.\nStyling properties in the JSON configuration will be ignored. The following section discusses chart styling.\n\n### CSS Styling\n\nChart appearance is primarily controlled by CSS style rules.\nA comprehensive list of the supported style classes can be found at\nhttps://www.highcharts.com/docs/chart-design-and-style/style-by-css\n\nSee also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.\n\n### RTL support\n\n`vaadin-charts` as well as [Highcharts](https://www.highcharts.com/) by itself are not adjusting the layout\nbased on the `dir` attribute. In order to make `vaadin-charts` display RTL content properly additional\nJSON configuration should be used.\nEach chart should be updated based on the specific needs, but general recommendations are:\n\n 1. Set `reversed` to true for xAxis (https://api.highcharts.com/highcharts/xAxis.reversed).\n 2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).\n 3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).\n\n### Setting colors\n\nAlthough charts can be styled as described above, there is a simpler way for setting colors.\nColors can be set using CSS custom properties `--vaadin-charts-color-{n}` (where `n` goes from `0 - 9`).\n\nFor example `--vaadin-charts-color-0` sets the color of the first series on a chart.",
           "extension": true,
           "attributes": [
             {

package/src/vaadin-lit-chart-series.js

@@ -1,32 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
- *
- * This program is available under Vaadin Commercial License and Service Terms.
- *
- *
- * See https://vaadin.com/commercial-license-and-service-terms for the full
- * license.
- */
-import { LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ChartSeriesMixin } from './vaadin-chart-series-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-chart-series>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- */
-class ChartSeries extends ChartSeriesMixin(PolylitMixin(LitElement)) {
-  static get is() {
-    return 'vaadin-chart-series';
-  }
-}
-
-defineCustomElement(ChartSeries);
-
-export { ChartSeries };

package/src/vaadin-lit-chart.js

@@ -1,61 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
- *
- * This program is available under Vaadin Commercial License and Service Terms.
- *
- *
- * See https://vaadin.com/commercial-license-and-service-terms for the full
- * license.
- */
-import './vaadin-lit-chart-series.js';
-import { css, html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ChartMixin } from './vaadin-chart-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-chart>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- */
-class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        width: 100%;
-        overflow: hidden;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="chart"></div>
-      <slot id="slot"></slot>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-chart';
-  }
-
-  static get cvdlName() {
-    return 'vaadin-chart';
-  }
-}
-
-defineCustomElement(Chart);
-
-export { Chart };

package/theme/lumo/vaadin-lit-chart.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-chart-styles.js';
-import '../../src/vaadin-lit-chart.js';

package/theme/lumo/vaadin-lit-chart.js

@@ -1,2 +0,0 @@
-import './vaadin-chart-styles.js';
-import '../../src/vaadin-lit-chart.js';

package/theme/material/vaadin-chart-styles.d.ts

@@ -1,6 +0,0 @@
-import '../vaadin-chart-base-theme.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-declare const chartColors: import("lit").CSSResult;
-declare const chartTheme: import("lit").CSSResult;
-export { chartColors, chartTheme };

package/theme/material/vaadin-chart-styles.js

@@ -1,97 +0,0 @@
-import '../vaadin-chart-base-theme.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-const chartColors = css`
-  :host {
-    --vaadin-charts-color-0: #6200ee;
-    --vaadin-charts-color-1: #2fa69a;
-    --vaadin-charts-color-2: #ec611f;
-    --vaadin-charts-color-3: #fec02f;
-    --vaadin-charts-color-4: #ff4193;
-    --vaadin-charts-color-5: #007dee;
-    --vaadin-charts-color-6: #b064fc;
-    --vaadin-charts-color-7: #0c5d56;
-    --vaadin-charts-color-8: #42c6ff;
-    --vaadin-charts-color-9: #b00020;
-    --vaadin-charts-color-positive: var(--vaadin-charts-color-1, #2fa69a);
-    --vaadin-charts-color-negative: var(--vaadin-charts-color-9, #b00020);
-  }
-
-  :host([theme~='gradient']) {
-    --vaadin-charts-color-0: #6200ee;
-    --vaadin-charts-color-1: #6962e8;
-    --vaadin-charts-color-2: #619fe1;
-    --vaadin-charts-color-3: #2fbfd3;
-    --vaadin-charts-color-4: #03dac6;
-    --vaadin-charts-color-5: #5bd091;
-    --vaadin-charts-color-6: #acc65e;
-    --vaadin-charts-color-7: #ffbc2b;
-    --vaadin-charts-color-8: #fe9940;
-    --vaadin-charts-color-9: #fd695e;
-    --vaadin-charts-color-positive: var(--vaadin-charts-color-6);
-    --vaadin-charts-color-negative: var(--vaadin-charts-color-9);
-  }
-
-  :host([theme~='monotone']) {
-    --vaadin-charts-color-0: #6200ee;
-    --vaadin-charts-color-1: #7f39fb;
-    --vaadin-charts-color-2: #985eff;
-    --vaadin-charts-color-3: #bb86fc;
-    --vaadin-charts-color-4: #dbb2ff;
-    --vaadin-charts-color-5: #ecddfd;
-    --vaadin-charts-color-6: #9fe3eb;
-    --vaadin-charts-color-7: #03dac6;
-    --vaadin-charts-color-8: #00c4b4;
-    --vaadin-charts-color-9: #01a299;
-    --vaadin-charts-color-positive: var(--vaadin-charts-color-8);
-    --vaadin-charts-color-negative: var(--vaadin-charts-color-0);
-  }
-
-  :host([theme~='classic']) {
-    --vaadin-charts-color-0: #7cb5ec;
-    --vaadin-charts-color-1: #434348;
-    --vaadin-charts-color-2: #90ed7d;
-    --vaadin-charts-color-3: #f7a35c;
-    --vaadin-charts-color-4: #8085e9;
-    --vaadin-charts-color-5: #f15c80;
-    --vaadin-charts-color-6: #e4d354;
-    --vaadin-charts-color-7: #2b908f;
-    --vaadin-charts-color-8: #f45b5b;
-    --vaadin-charts-color-9: #91e8e1;
-  }
-`;
-
-const chartTheme = css`
-  :host {
-    --vaadin-charts-background: var(--material-background-color);
-    --vaadin-charts-title-label: var(--material-body-text-color);
-    --vaadin-charts-axis-title: var(--material-secondary-text-color);
-    --vaadin-charts-axis-label: var(--material-secondary-text-color);
-    --vaadin-charts-data-label: var(--material-body-text-color);
-    --vaadin-charts-secondary-label: var(--material-secondary-text-color);
-    --vaadin-charts-axis-line: var(--vaadin-charts-contrast-5pct);
-    --vaadin-charts-grid-line: var(--vaadin-charts-contrast-10pct);
-    --vaadin-charts-disabled-label: var(--material-disabled-text-color);
-    --vaadin-charts-contrast: var(--material-body-text-color);
-    --vaadin-charts-contrast-5pct: var(--material-secondary-background-color);
-    --vaadin-charts-contrast-10pct: var(--material-divider-color);
-    --vaadin-charts-contrast-20pct: var(--material-disabled-color);
-    --vaadin-charts-contrast-60pct: var(--material-secondary-text-color);
-    --vaadin-charts-tooltip-background: var(--material-background-color);
-    --vaadin-charts-tooltip-border-color: var(--material-background-color);
-    --vaadin-charts-button-label: var(--material-primary-color);
-    --vaadin-charts-button-background: var(--material-background-color);
-    --vaadin-charts-button-hover-background: var(--material-secondary-background-color);
-    --vaadin-charts-button-active-label: var(--material-primary-contrast-color);
-    --vaadin-charts-button-active-background: var(--material-primary-color);
-    --vaadin-charts-xaxis-line-width: 0;
-    --vaadin-charts-tooltip-background-opacity: 1;
-    font-family: var(--material-font-family);
-  }
-`;
-
-registerStyles('vaadin-chart', [chartColors, chartTheme], { moduleId: 'material-chart' });
-
-export { chartColors, chartTheme };

package/theme/material/vaadin-chart.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-chart-styles.js';
-import '../../src/vaadin-chart.js';

package/theme/material/vaadin-chart.js

@@ -1,2 +0,0 @@
-import './vaadin-chart-styles.js';
-import '../../src/vaadin-chart.js';

package/theme/material/vaadin-lit-chart.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-chart-styles.js';
-import '../../src/vaadin-lit-chart.js';

package/theme/material/vaadin-lit-chart.js

@@ -1,2 +0,0 @@
-import './vaadin-chart-styles.js';
-import '../../src/vaadin-lit-chart.js';

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

@@ -1 +0,0 @@
-export * from './vaadin-chart-series.js';

package/vaadin-lit-chart-series.js

@@ -1 +0,0 @@
-export * from './src/vaadin-lit-chart-series.js';

package/vaadin-lit-chart.d.ts

@@ -1 +0,0 @@
-export * from './vaadin-chart.js';

package/vaadin-lit-chart.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-chart.js';
-export * from './src/vaadin-lit-chart.js';