Repository navigation
[Dashboard] Add Ability to Customize Appearance #9243
Description
Activity
- addedFeature:DashboardDashboard related featuresDashboard related features
on Nov 29, 2016 - changed the title
[-]Dashboard themes[/-][+]Ability to Customize Dashboard Appearance[/+]on Jan 13, 2017 Ability to change panel background color also requested in https://discuss.elastic.co/t/change-color/75585.
One of the windows contains very important information for our users. I would like to know if someone have a solution to spotlight this window only. I was thinking about or: - changing the background color of this windows - or changing the color of the font (red or green), since that all the other windows are in a grey colour font.+1
+1
+1
+1
+1
+1
+1
- addedTeam:VisualizationsTeam label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//and removed
on Sep 14, 2018 3 remaining items
+1
- addedTeam:PresentationPresentation Team for Dashboard, Input Controls, and Canvas t//Presentation Team for Dashboard, Input Controls, and Canvas t//and removedTeam:VisualizationsTeam label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//
on Oct 7, 2020 Support for uploading the gif or image in dashboard
- addedenhancementNew value added to drive a business resultNew value added to drive a business resultloe:x-largeExtra Large Level of EffortExtra Large Level of Effortimpact:lowAddressing this issue will have a low level of impact on the quality/strength of our product.Addressing this issue will have a low level of impact on the quality/strength of our product.and removed
on Jan 26, 2023 @Mufi123 the ability to add an image to a dashboard will be added with version 8.7.
Leaving this open, but I've added
impact:lowto it, as we haven't triaged exactly which customizations we will allow on the dashboard level at the moment.Any change we can have this feature be implemented?
We currently use a Text to differentiate between test/production dashboards.. but changing the background color should suffice aswell as to save some precious space with packed dashboards- changed the title
[-]Ability to Customize Dashboard Appearance[/-][+][Dashboard] Add Ability to Customize Appearance[/+]on Feb 2, 2023 @Baklap4, we haven't prioritized this functionality at the moment. You can track this issue to know when we do.
Closing this for the time being, as it's likely that this theming will mostly be up to the individual chart types for the foreseeable future. For instance, the new metric chart is in charge of its own background color:
From a dashbaord point of view, we may add slight styling settings for gutter size, padding, etc, but it is unlikely that we will offer color customizations. If our priorities change, we can potentially reopen this issue.
@ThomThomson is this background color only per individual charts? So not changable for the different dashboards you put it on?
As OP also asked i'd love to make multiple dashboards and be able to see on a screen far away to what i'm looking at. So for example if the screen is green we're looking at production, if the screen is orange we're looking at test. This way we don't have to use labels which we have to read
Ability to customize dashboard style and appearance
Background
Kibana 4 dashboards had a different background color from panel color, panel borders, and margins. When we introduced Kibana 5, we got rid of all of that because some users found that style to clutter their dashboards, especially if they used many small visualizations. After we did that, we heard from community members who did not like the borderless variation (#9701).
If we give users the ability to customize the look and feel of each dashboard to their own liking, this could solve this problem. Other ways to solve it are by simply adding a border toggle, or introducing a couple new themes (#14123).
Attributes to become customizable
Per dashboard:
Per Panel:
Pros
Cons
Use cases
Mocks:
Implementation Details
color={panelBackgroundColor}in an outer element, but a particular visualization may have it's own inline styles that will override that. Since we support custom visualization plugins, authors may need/want to adjust their styling.Interaction with dark theme
Sources
https://discuss.elastic.co/t/how-can-we-change-background-color-of-dashboard/35508
https://discuss.elastic.co/t/how-to-change-the-background-color/49291
https://discuss.elastic.co/t/kibana-5-0-step-back/66019
Thor




Examples of customized thor visualizations:
Canvas