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/css-styling2.png b/articles/components/charts/img/css-styling2.png index 7bde1b599f..e035818d05 100644 Binary files a/articles/components/charts/img/css-styling2.png and b/articles/components/charts/img/css-styling2.png 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 3359357087..456ec3581f 100644 --- a/articles/components/charts/styling/index.adoc +++ b/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` diff --git a/articles/components/charts/styling/styling.adoc b/articles/components/charts/styling/styling.adoc index c1a18e10e3..65e2a0118a 100644 --- a/articles/components/charts/styling/styling.adoc +++ b/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