Skip to content

[Dashboard] Add Ability to Customize Appearance #9243

Description

@stacey-gammon

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:

  • Dashboard background color
  • Default panel background color
  • Margins
  • Padding
  • Title color (or we can auto determine it black or white based on luminosity of bg color)

Per Panel:

  • Background colors
  • Title color (or we can auto determine it black or white based on luminosity of bg color)
  • Margins
  • Padding
  • Custom title

Pros

  • Make everyone happy by giving them the tools to set the style themselves.

Cons

  • Can create ugly dashboards.
  • Slipper slope of attributes added to maintain a good appearance - e.g. Title background color? Icon colors? Font Size? Font family?

Use cases

  • Embedded dashboards, to match the look and feel of the area they are being embedded in
  • To highlight, or categorize certain panels
    • e.g. a panel that shows error codes could be colored red.
  • To categorize or theme certain dashboards
    • e.g. Kibana dashboards could be colored pink and green, while Logstash dashboards could be colored green and yellow

Mocks:

screen shot 2017-09-22 at 11 20 51 am

screen shot 2017-09-22 at 11 20 59 am

Implementation Details

  • Take the simple approach for phase 1 and use inline style overrides.
  • We might also want to pass the custom configuration object in to the renderer, so each visualization can be in charge of combining it's styling with the panel.
    • e.g. we can have 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

  • Selecting dark theme would reset the settings, which can then overridden.

Sources

Activity

  1. changed the title [-]Custom dashboard themes[/-] [+]Dashboard themes[/+] on Nov 29, 2016
  2. changed the title [-]Dashboard themes[/-] [+]Ability to Customize Dashboard Appearance[/+] on Jan 13, 2017
  3. ycombinator commented on Feb 18, 2017

    @ycombinator
    Contributor

    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.
    
  4. narschang commented on May 18, 2017

    @narschang

    +1

  5. SnchitGrover commented on Aug 30, 2017

    @SnchitGrover

    +1

  6. tuxton commented on Dec 26, 2017

    @tuxton

    +1

  7. georgezoto commented on Jan 3, 2018

    @georgezoto

    +1

  8. kkr78 commented on Jan 29, 2018

    @kkr78

    +1

  9. Darryn-George commented on May 17, 2018

    @Darryn-George

    +1

  10. Harish346 commented on Jul 4, 2018

    @Harish346

    +1

  11. added
    Team:VisualizationsTeam label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//
    and removed on Sep 14, 2018
  12. 3 remaining items

  13. PiotrBB commented on Jul 10, 2019

    @PiotrBB

    +1

  14. added
    Team:PresentationPresentation Team for Dashboard, Input Controls, and Canvas t//
    and removed
    Team:VisualizationsTeam label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//
    on Oct 7, 2020
  15. Mufi123 commented on Nov 10, 2022

    @Mufi123

    Support for uploading the gif or image in dashboard

  16. added
    enhancementNew value added to drive a business result
    loe:x-largeExtra Large Level of Effort
    impact:lowAddressing this issue will have a low level of impact on the quality/strength of our product.
    and removed on Jan 26, 2023
  17. ThomThomson commented on Jan 26, 2023

    @ThomThomson
    Contributor

    @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:low to it, as we haven't triaged exactly which customizations we will allow on the dashboard level at the moment.

  18. Baklap4 commented on Feb 2, 2023

    @Baklap4

    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

  19. changed the title [-]Ability to Customize Dashboard Appearance[/-] [+][Dashboard] Add Ability to Customize Appearance[/+] on Feb 2, 2023
  20. ThomThomson commented on Feb 2, 2023

    @ThomThomson
    Contributor

    @Baklap4, we haven't prioritized this functionality at the moment. You can track this issue to know when we do.

  21. ThomThomson commented on Apr 11, 2023

    @ThomThomson
    Contributor

    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:

    Screen Shot 2023-04-11 at 2 38 58 PM

    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.

  22. Baklap4 commented on Apr 12, 2023

    @Baklap4

    @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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Feature:DashboardDashboard related featuresTeam:PresentationPresentation Team for Dashboard, Input Controls, and Canvas t//enhancementNew value added to drive a business resultimpact:lowAddressing this issue will have a low level of impact on the quality/strength of our product.loe:x-largeExtra Large Level of Effort

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions