#4782 Update chart styling for V25

articles/components/charts/styling/index.adoc

@@ -1,8 +1,8 @@
 ---
 title: Chart Styling
-page-title: How to customize Vaadin charts with CSS
-description: How to style a chart with CSS in your project.
-meta-description: Learn how to style Vaadin Charts using CSS. Customize colors, fonts, and layouts to align with your application design.
+page-title: How to customize Vaadin charts styling
+description: How to style a chart with CSS or with Java API in your project.
+meta-description: Learn how to style Vaadin Charts using CSS or Java API. Customize colors, fonts, and layouts to align with your application design.
 order: 5
 ---
 
@@ -43,6 +43,50 @@ image::charts_theme_variants.png[]
 The default styling mode in Flow applications uses the Java API.
 See the link:https://vaadin.com/api/platform/com/vaadin/flow/component/charts/model/style/package-summary.html[Java API reference] for details.
 
+=== Styling Using Java API Example
+
+In this example Java API is used to change the color of point markers to yellow, their outline to purple, x-axis labels to blue, and the line color to black.
+
+[source,java]
+.`FlowStyleExample.java`
+----
+public class FlowStyleExample extends Div {
+
+    public FlowStyleExample() {
+        var chart = new Chart();
+        var configuration = chart.getConfiguration();
+
+        var ds = new DataSeries();
+        ds.setData(7.0, 6.9, 9.5, 14.5);
+        ds.setColorAxis(3);
+
+        var plotOptions = new PlotOptionsLine();
+        plotOptions.setColor(SolidColor.BLACK); // Line color
+
+        var marker = new Marker();
+        marker.setFillColor(SolidColor.YELLOW); // Point inside color
+        marker.setLineWidth(2);
+        marker.setLineColor(SolidColor.PURPLE); // Point outline color
+
+        plotOptions.setMarker(marker);
+
+        ds.setPlotOptions(plotOptions);
+
+        configuration.addSeries(ds);
+
+        configuration.getxAxis().setCategories("Jan", "Feb", "Mar", "Apr");
+        configuration.getxAxis().getLabels().getStyle().setColor(SolidColor.BLUE); // X axis labels color
+
+        add(chart);
+    }
+}
+----
+
+[[figure.chart.flow.styling.example]]
+.Chart styled through Java API
+[.fill.white]
+image::../img/flow-styling.png[]
+
 
 [[css.styling]]
 == CSS Styling
@@ -55,44 +99,44 @@ Flow applications can use CSS styling by enabling "styled mode" in the Chart con
 
 [source,java]
 ----
-Chart chart = new Chart();
-Configuration conf = chart.getConfiguration();
+var chart = new Chart();
+var conf = chart.getConfiguration();
 conf.getChart().setStyledMode(true);
 ----
 
 === CSS Styling Example
-In this example CSS is used to change the color of point markers to yellow and data labels to red.
+In this example CSS is used to change the color of point markers to yellow, their outline to purple, data labels to red, and line colors to green.
 
-.`custom-chart-styles.css`
+.`styles.css`
 [source,css]
 ----
-:host(.first-chart) g.highcharts-markers > .highcharts-point {
-  fill: yellow;
-}
-
-:host(.first-chart) .highcharts-data-label text {
-  fill: red;
+vaadin-chart.first-chart {
+    --vaadin-charts-color-0: green;
+    --vaadin-charts-color-1: lightgreen;
+    --vaadin-charts-color-2: darkgreen;
+    --vaadin-charts-data-label: red;
 }
 ----
 
 .`CssStyleExample.java`
 [source,java]
 ----
-@CssImport(value = "./styles/custom-chart-styles.css", themeFor = "vaadin-chart")
 public class CssStyleExample extends Div {
 
     public CssStyleExample() {
-        Chart chart = new Chart();
-        Configuration configuration = chart.getConfiguration();
+        var chart = new Chart();
+        var configuration = chart.getConfiguration();
 
-        configuration.getChart().setType(ChartType.LINE);
+        var chartModel = configuration.getChart();
+        chartModel.setType(ChartType.LINE);
+        chartModel.setStyledMode(true);
 
         configuration.getxAxis().setCategories("Jan", "Feb", "Mar", "Apr");
 
-        DataSeries ds = new DataSeries();
+        var ds = new DataSeries();
         ds.setData(7.0, 6.9, 9.5, 14.5);
 
-        DataLabels callout = new DataLabels(true);
+        var callout = new DataLabels(true);
         callout.setShape(Shape.CALLOUT);
         callout.setY(-12);
         ds.get(1).setDataLabels(callout);
@@ -105,55 +149,47 @@ public class CssStyleExample extends Div {
 }
 ----
 
-[[figure.css.styling.example1]]
-.Chart with Yellow Point Markers and Red Labels
+.`themes/{mytheme}/components/vaadin-chart.css` - Requires "Theme component style injection" feature flag enabled - `com.vaadin.experimental.themeComponentStyles=true`
+[source,css]
+----
+:host(.first-chart) .highcharts-color-0 .highcharts-point {
+    fill: yellow;
+    stroke: purple;
+    stroke-width: 2px;
+}
+----
+
+
+[[figure.chart.css.styling.example]]
+.Chart with Yellow Point Markers, Purple `  Point Marker outline, Red Labels, and Green Line color.
 [.fill.white]
-image::img/css-styling1.png[]
+image::../img/css-styling.png[]
 
 
-[[css.styling.example2]]
-== Exposing Chart Elements for Styling (Flow)
+=== Adding and Styling a Class Name
 
-CSS class names can be applied both to chart instances and to individual elements in charts.
-In the example below, the `huge-axis` class name is applied to the x-axis of a chart to give it a distinct styling.
+CSS class names can be applied to both chart instances and individual chart elements.
+In the example below, the `bold-green-axis` class name is applied to the X-axis of a chart to give it a distinct style.
 
-[source,java]
 .`CssStyleExample.java`
+[source,java]
 ----
-@CssImport(value = "./styles/huge-axis.css", themeFor = "vaadin-chart")
-public class CssStyleExample extends Div {
-
-    public CssStyleExample() {
-        Chart chart = new Chart();
-        Configuration configuration = chart.getConfiguration();
-
-        DataSeries ds = new DataSeries();
-        ds.setData(7.0, 6.9, 9.5, 14.5);
-        configuration.addSeries(ds);
-
-        configuration.getxAxis().setCategories("Jan", "Feb", "Mar", "Apr");
-
-        // Expose the X-Axis for CSS targeting.
-        configuration.getxAxis().setClassName("huge-axis");
-
-        add(chart);
-    }
-}
+configuration.getxAxis().setClassName("bold-green-axis");
 ----
 
-.`huge-axis.css`
+.`themes/{mytheme}/components/vaadin-chart.css` - Requires "Theme component style injection" feature flag enabled - `com.vaadin.experimental.themeComponentStyles=true`
 [source,css]
 ----
-.huge-axis {
-  fill: red;
-  font-size: xx-large;
+.bold-green-axis {
+  font-weight: bold;
+  fill: green;
+  font-size: 14px;
 }
 ----
 
-[[figure.css.styling.example2]]
-.Chart with a Huge X-Axis
+[[figure.chart.css.styling.example]]
+.Chart with green, bold, and slightly larger X-axis labels.
 [.fill.white]
-image::img/css-styling2.png[]
-
+image::../img/css-styling2.png[]
 
 [discussion-id]`3E5B31FB-DF25-4D1E-80EB-7AB485C7B566`

articles/components/charts/styling/styling.adoc

@@ -7,9 +7,15 @@ order: 50
 ---
 
 
-= Charts Style Properties
+= Styling
 
-include::../../_styling-section-theming-props.adoc[tag=style-properties]
+== Style Properties
+The following style properties can be used in CSS stylesheets to customize the appearance of this component.
+
+To apply values to these properties globally in your application UI, place them in a CSS block using the `vaadin-chart {...}` selector.
+ifdef::flow,lit[]
+See <<{articles}/styling/lumo/lumo-style-properties#,Lumo Style Properties>> for more information on style properties.
+endif::[]
 
 === Common Properties