timeline chart css style cannot overwrite


I use vaadin7 and the “dashboard.scss” style and I would like to change the color of the timeline chart in the “.v-timeline-widget-datefield” css container . So I implemented in the container “color: black !important;”
But the color will not be overtaken in the chart because the color style has been already “color: white !important” in the style.css in the timeline widgetset.

Has anyone a solution to solve the issue with the timeline chart or is it a bug that you cannot change the color and I have to send the issue to the vaadin support?

Thanks and regards,


Could everyone plese help me with my question?
It is very urgent.

Thanks in advance!


you can just use a more specific css selector and it will override the less specific one. For example:

.v-timeline-widget-daterange .v-timeline-widget-datefield {
color: black !important;

Hello Teppo,

Thank you very much for your fast help.
It is working fine now with your approach.