@vaadin/charts 25.0.0-alpha19 → 25.0.0-alpha20

package/package.json

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

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

@@ -34,7 +34,7 @@ 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-color)));
+    fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-data-label, var(--vaadin-text-color)));
   }
 
   ${unsafeCSS(scope)} .highcharts-tooltip .highcharts-tracker {
@@ -44,7 +44,7 @@ const tooltipStyles = (scope) => css`
 
   ${unsafeCSS(scope)} .highcharts-tooltip .highcharts-header {
     font-size: 0.85em;
-    color: var(--highcharts-neutral-color-60, var(--vaadin-color-subtle));
+    color: var(--highcharts-neutral-color-60, var(--vaadin-text-color-secondary));
   }
 
   ${unsafeCSS(scope)} .highcharts-tooltip-box {
@@ -115,17 +115,17 @@ export const chartStyles = css`
     --_color-positive: light-dark(#19b156, #1ccc62);
     --_color-negative: light-dark(#dc0611, #f7353f);
 
-    --_label: var(--vaadin-charts-label, var(--vaadin-color));
-    --_secondary-label: var(--vaadin-charts-secondary-label, var(--vaadin-color-subtle));
-    --_disabled-label: var(--vaadin-charts-disabled-label, var(--vaadin-color-disabled));
+    --_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));
-    --_axis-line: var(--vaadin-charts-axis-line, var(--vaadin-border-color-subtle));
+    --_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));
-    --_grid-line: var(--vaadin-charts-grid-line, var(--vaadin-border-color-subtle));
+    --_grid-line: var(--vaadin-charts-grid-line, var(--vaadin-border-color-secondary));
     --_minor-grid-line: var(
       --vaadin-charts-minor-grid-line,
-      color-mix(in srgb, var(--vaadin-border-color-subtle) 60%, transparent)
+      color-mix(in srgb, var(--vaadin-border-color-secondary) 60%, transparent)
     );
     --_data-label: var(--vaadin-charts-data-label, var(--_label));
   }
@@ -359,100 +359,110 @@ export const chartStyles = css`
   :where([styled-mode]) .highcharts-color-0 {
     fill: var(--_color-0);
     stroke: var(--_color-0);
-    color: var(--_color-0-label);
   }
 
   :where([styled-mode]) .highcharts-color-1 {
     fill: var(--_color-1);
     stroke: var(--_color-1);
-    color: var(--_color-1-label);
   }
 
   :where([styled-mode]) .highcharts-color-2 {
     fill: var(--_color-2);
     stroke: var(--_color-2);
-    color: var(--_color-2-label);
   }
 
   :where([styled-mode]) .highcharts-color-3 {
     fill: var(--_color-3);
     stroke: var(--_color-3);
-    color: var(--_color-2-label);
   }
 
   :where([styled-mode]) .highcharts-color-4 {
     fill: var(--_color-4);
     stroke: var(--_color-4);
-    color: var(--_color-4-label);
   }
 
   :where([styled-mode]) .highcharts-color-5 {
     fill: var(--_color-5);
     stroke: var(--_color-5);
-    color: var(--_color-5-label);
   }
 
   :where([styled-mode]) .highcharts-color-6 {
     fill: var(--_color-6);
     stroke: var(--_color-6);
-    color: var(--_color-6-label);
   }
 
   :where([styled-mode]) .highcharts-color-7 {
     fill: var(--_color-7);
-    stroke: var(--_color-7);
     color: var(--_color-7-label);
   }
 
   :where([styled-mode]) .highcharts-color-8 {
     fill: var(--_color-8);
     stroke: var(--_color-8);
-    color: var(--_color-8-label);
   }
 
   :where([styled-mode]) .highcharts-color-9 {
     fill: var(--_color-9);
     stroke: var(--_color-9);
-    color: var(--_color-9-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-0 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-0 {
     color: var(--_color-0-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-1 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-1 {
     color: var(--_color-1-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-2 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-2 {
     color: var(--_color-2-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-3 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-3 {
     color: var(--_color-3-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-4 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-4 {
     color: var(--_color-4-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-5 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-5 {
     color: var(--_color-5-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-6 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-6 {
     color: var(--_color-6-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-7 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-7 {
     color: var(--_color-7-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-8 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-8 {
     color: var(--_color-8-label);
   }
 
-  :where([styled-mode]) .highcharts-data-label-color-9 {
+  :where([styled-mode])
+    :where(.highcharts-treemap-series, .highcharts-organization-series, .highcharts-gantt-series)
+    .highcharts-data-label-color-9 {
     color: var(--_color-9-label);
   }
 
@@ -776,6 +786,10 @@ export const chartStyles = css`
     stroke-width: 0;
   }
 
+  :where([styled-mode]) .highcharts-organization-series .highcharts-null-point {
+    fill: transparent;
+  }
+
   :where([styled-mode]) .highcharts-polygon-series .highcharts-graph {
     fill: inherit;
     stroke-width: 0;
@@ -944,7 +958,10 @@ export const chartStyles = css`
   }
 
   :where([styled-mode]) .highcharts-button-disabled text {
-    fill: var(--highcharts-neutral-color-80, var(--vaadin-charts-button-disabled-label, var(--vaadin-color-disabled)));
+    fill: var(
+      --highcharts-neutral-color-80,
+      var(--vaadin-charts-button-disabled-label, var(--vaadin-text-color-disabled))
+    );
   }
 
   :where([styled-mode]) .highcharts-range-selector-buttons .highcharts-button {
@@ -1106,7 +1123,7 @@ export const chartStyles = css`
   }
 
   :where([styled-mode]) .highcharts-null-point {
-    fill: var(--highcharts-neutral-color-3, transparent);
+    fill: var(--highcharts-neutral-color-3, var(--vaadin-charts-button-background, var(--vaadin-background-container)));
   }
 
   /* 3d charts */

package/web-types.json

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

package/web-types.lit.json

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