Fix broken charts styling examples, add Flow API example

articles/components/charts/styling/index.adoc

@@ -1,10 +1,10 @@
 ---
-tab-title: CSS Styling
+tab-title: Chart Styling
 layout: tabbed-page
 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
 ---
 
@@ -35,6 +35,50 @@ See a <<{articles}/components/charts#,live demo of the variants>>.
 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() {
+        Chart chart = new Chart();
+        Configuration configuration = chart.getConfiguration();
+
+        DataSeries ds = new DataSeries();
+        ds.setData(7.0, 6.9, 9.5, 14.5);
+        ds.setColorAxis(3);
+
+        PlotOptionsLine plotOptions = new PlotOptionsLine();
+        plotOptions.setColor(SolidColor.BLACK); // Line color
+
+        Marker 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
@@ -53,31 +97,42 @@ 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`
+.`themes/{mytheme}/components/vaadin-chart.css`
 [source,css]
 ----
-:host(.first-chart) g.highcharts-markers > .highcharts-point {
-  fill: yellow;
+:host(.first-chart) .highcharts-color-0 .highcharts-point {
+    fill: yellow;
+    stroke: purple;
+    stroke-width: 2px;
 }
+----
+
 
-:host(.first-chart) .highcharts-data-label text {
-  fill: red;
+.`themes/{mytheme}/styles.css`
+[source,css]
+----
+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();
 
-        configuration.getChart().setType(ChartType.LINE);
+        ChartModel chartModel = configuration.getChart();
+        chartModel.setType(ChartType.LINE);
+        chartModel.setStyledMode(true);
 
         configuration.getxAxis().setCategories("Jan", "Feb", "Mar", "Apr");
 
@@ -97,55 +152,10 @@ public class CssStyleExample extends Div {
 }
 ----
 
-[[figure.css.styling.example1]]
-.Chart with Yellow Point Markers and Red Labels
-[.fill.white]
-image::img/css-styling1.png[]
-
-
-[[css.styling.example2]]
-== Exposing Chart Elements for Styling (Flow)
-
-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.
-
-[source,java]
-.`CssStyleExample.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);
-    }
-}
-----
-
-.`huge-axis.css`
-[source,css]
-----
-.huge-axis {
-  fill: red;
-  font-size: xx-large;
-}
-----
-
-[[figure.css.styling.example2]]
-.Chart with a Huge X-Axis
+[[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-styling2.png[]
+image::../img/css-styling.png[]
 
 
 [discussion-id]`3E5B31FB-DF25-4D1E-80EB-7AB485C7B566`

articles/components/charts/styling/styling.adoc

@@ -9,7 +9,13 @@ order: 50
 
 = 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