diff --git a/articles/components/charts/img/css-styling.png b/articles/components/charts/img/css-styling.png new file mode 100644 index 0000000000..c7358e724f Binary files /dev/null and b/articles/components/charts/img/css-styling.png differ diff --git a/articles/components/charts/img/css-styling1.png b/articles/components/charts/img/css-styling1.png deleted file mode 100644 index 4c6cc1eb6a..0000000000 Binary files a/articles/components/charts/img/css-styling1.png and /dev/null differ diff --git a/articles/components/charts/img/flow-styling.png b/articles/components/charts/img/flow-styling.png new file mode 100644 index 0000000000..4a50ba967a Binary files /dev/null and b/articles/components/charts/img/flow-styling.png differ diff --git a/articles/components/charts/styling/index.adoc b/articles/components/charts/styling/index.adoc index 0e6d1601c4..f91fd7830b 100644 --- a/articles/components/charts/styling/index.adoc +++ b/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` diff --git a/articles/components/charts/styling/styling.adoc b/articles/components/charts/styling/styling.adoc index b92f28d956..65e2a0118a 100644 --- a/articles/components/charts/styling/styling.adoc +++ b/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