0

We have a few Vaadin charts (Pro) on our dashboard, which have been styled via CSS (font color, font size, bar colors,...). These CSS files are not on the system, but are loaded from an external server using @Stylesheet([URL]) in my Java-Class. The charts are built with Java. Everything is displayed correctly, but when using the built-in export function via the interface, not all styles are used. We are using Vaadin14. Does anyone here have an idea/solution?
[This is how it looks on our dashboard][1]
[This is how the downloaded chart looks like][2]
[This is the contextmenu][3]
As you can see, among other things, the bar colors and the font size are not applied correctly. 
:host(.ChartDatenschutz) .highcharts-color-0, :host(.ChartDatenschutzTOM) .highcharts-color-0 {
  stroke: var(---kl-highcharts-fortschritt-color-00);
                fill: var(---kl-highcharts-fortschritt-color-00);
}

:host(.ChartDatenschutz) .highcharts-data-label-color-0 text, :host(.ChartDatenschutzTOM) .highcharts-data-label-color-0 text {
  fill:var(---kl-red-color);
                font-weight: 600;
}

:host(.ChartDatenschutz) .highcharts-color-1, :host(.ChartDatenschutzTOM) .highcharts-color-1 {
  stroke: var(---kl-highcharts-fortschritt-color-01);
                fill: var(---kl-highcharts-fortschritt-color-01);
}

:host(.ChartDatenschutz) .highcharts-color-2, :host(.ChartDatenschutzTOM) .highcharts-color-2 {
  stroke: var(---kl-highcharts-fortschritt-color-02);
                fill: var(---kl-highcharts-fortschritt-color-02);
}

:host(.ChartDatenschutz) .highcharts-color-3, :host(.ChartDatenschutzTOM) .highcharts-color-3 {
  stroke: var(---kl-highcharts-fortschritt-color-03);
                fill: var(---kl-highcharts-fortschritt-color-03);
}

:host(.ChartDatenschutz) .highcharts-color-4, :host(.ChartDatenschutzTOM) .highcharts-color-4 {
  stroke: var(---kl-highcharts-fortschritt-color-04);
                fill: var(---kl-highcharts-fortschritt-color-04);
}

:host(.ChartDatenschutz) .highcharts-color-5, :host(.ChartDatenschutzTOM) .highcharts-color-5 {
  stroke: var(---kl-highcharts-fortschritt-color-05);
                fill: var(---kl-highcharts-fortschritt-color-05);
}

:host(.ChartDatenschutz) .highcharts-data-label-color-5 text, :host(.ChartDatenschutzTOM) .highcharts-data-label-color-5 text {
  fill: var(---kl-white-color);
}

:host(.ChartDatenschutz) .highcharts-legend-item, :host(.ChartDatenschutzTOM) .highcharts-legend-item {
  fill: var(---kl-text-color);
}

(Part of the CSS)
The styles come from an external design team, which means I don't have direct access to the files. However, I can let them know if something needs to be changed.
Thanks in advance

Simon Felder
  • 3
  • 3
  • Could you try using `chart.styledMode`, it's default style sheet is available from https://code.highcharts.com/css/highcharts.css? Let me know if is loading full or partial. – Sebastian Hajdus May 04 '22 at 07:43
  • Thank you for your reply. How can I set the styledMode in Vaadin 14? I don't see a method for it. I see this method only in Vaadin 23 – Simon Felder May 04 '22 at 08:23
  • Sorry, I can help you only with HC configuration, I don't know Vaadin. – Sebastian Hajdus May 04 '22 at 13:10
  • 1
    The official way of exporting Vaadin Charts was added in V21 and does not support styling with CSS. It has to be done from the Java API. See the docs for more information https://vaadin.com/docs/latest/ds/components/charts/svg-generator/#customizing-svg-generation – Knoobie May 04 '22 at 18:57
  • @Knoobie can you formulate answer from this, what you say is correct. – Tatu Lund May 06 '22 at 12:50

1 Answers1

0

CSS styling of exported charts is not supported in Vaadin 23.0: https://vaadin.com/docs/latest/ds/components/charts/svg-generator/#customizing-svg-generation

CSS styling is not supported when exporting a chart as SVG.

ollitietavainen
  • 3,900
  • 13
  • 30