styling subTitle on pie chart

I am trying to increase the font-size of a subTitle for one of my pie charts. I followed the steps from [this link]
(https://vaadin.com/docs/v17/charts/java-api/css-styling.html).

Importing the css

@JsModule("@vaadin/vaadin-charts/theme/vaadin-chart-default-theme")
@CssImport(value = "./styles/custom-chart-styles.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
public class DashboardView extends Div {

the css

:host(.today-reservations) .highcharts-subtitle text {
    font-size: 6em;
}

the code

        var chart = new Chart(ChartType.PIE);
        chart.addClassName("today-reservations");
		.
		.
		.
		var subTitle = new Subtitle("26");
        subTitle.setUseHTML(false);
        subTitle.setAlign(HorizontalAlign.CENTER);
        subTitle.setVerticalAlign(VerticalAlign.MIDDLE);
        conf.setSubTitle(subTitle);
		

In the Chrome DevTools I can see that the chart has the new class name.

<vaadin-chart class="today-reservations" empty-text=" "></vaadin-chart>

Any idea why the custom styling is not taking effect?

I believe you need to target .highcharts-subtitle (not .highcharts-subtitle text). That is, the following should work:

:host(.today-reservations) .highcharts-subtitle {
	font-size: 6em;
}

Tarek, that worked. Oh wow this is amazing that we can target shadow dom components by class name. And just verified it works for targeting by ID using code below.

:host(#today-reservations) .highcharts-subtitle {
	font-size: 6em;
}

Question about the link. The [CSS Styling in Vaadin page]
(https://vaadin.com/docs/v17/charts/java-api/css-styling.html). Does it need to be fixed? In its example it has text there, where I had to remove text to get it to work. Or is there a scenario that requires it?

Question about the link. The [CSS Styling in Vaadin page]
(https://vaadin.com/docs/v17/charts/java-api/css-styling.html). Does it need to be fixed? In its example it has text there, where I had to remove text to get it to work. Or is there a scenario that requires it?

I’m not sure that the style in the link is broken. The thing is that the link is referring to the styling of the label whose internal structure is different from that of the subtitle.

If you inspect the label, you’ll see that the classname highcharts-data-label is not targeting the <text> element itself, rather the <g> element that is the parent of the <text>. That is why in the case of the label one would need to use .highcharts-data-label text (meaning target the <text> element inside the label).

However, in the case of the subtitle, the classname highcharts-subtitle is referring to the <text> element itself. Therefore, we don’t here need .highcharts-subtitle text (the latter would actually be looking for a <text> element within the <text> element that refers to the subtitle, not to the subtitle itself).