Written by @Giovanni_Magni and @markov00
The possibility to customize colors in charts simply and intuitively has been a feature requested for a long time. Given its complexity, it required some time to fully understand the implications of this but we are happy to say that from 8.11 this feature has been successfully released as a tech preview for Kibana Lens.
This release covers the first phase of a longer process that we are following and it covers all major updates without introducing any breaking changes for users and customers.
This feature comes with a whole new concept for color mapping for data series and color palettes, two different “objects” that would allow users to quickly customize their charts and to bring constituency among dashboards and applications.
With this blog post, we would like to briefly summarize the most important updates coming with these features, hopefully introducing some long-awaited possibilities.
Colors and data series
The most important thing in this whole new feature is the possibility to associate colors (coming from a palette or picking custom ones) to data series, directly from the Kibana Lens editor quickly and immediately.
From 8.11, after enabling the new feature, you will be able to pick any color of your choice and link it to one or more categories of data.
Persistency of mapping
One of the complexities that come with the kind of data typically coming from Elasticsearch is the unpredictability of that, both in terms of quantity and quality. Not knowing what we might expect is one of the most challenging things when working with data, this is why this new feature brings the concept of persistence of mapping. When a data series is associated with a specific color, that association will persist even if, due to an update or any change in data, that specific data series might not appear. This will keep the consistency of the chart across different contexts and time windows..
Multiple color palette
In 8.11 we introduced the possibility to pick from three basic color palettes: our classic datavis set of colors coming from EUI, the Kibana legacy palette which is important to be consistent with older charts and the Elastic Brand color palette recently introduced by the Marketing Team.
Users can now quickly switch from one to the other and see how that would affect the chart, at the same time this is only the starting point. The plan is to allow users to create color palettes that could reflect, for instance, their own brand identities. This enhancement will come with the next phases.
Integrated accessibility guidance
In this case as well, this is just the starting point of a much bigger feature that we would like to include, the possibility for users to know and to understand when their choice would cause accessibility problems for other people due to inadequate color contrast between colors, on both light and dark themes. The first integration of this would be an “in-product guidance” when the picked color would satisfy classic contrast requirements.
Gradients
In the past, gradients have been statically provided to users, being part of a list of predefined set of gradients. We are now opening for the user the possibility to create custom gradients and to have control of their constituent colors.
This allows us to re-evaluate a little the concept of gradient and to see it as an object that would be way more scalable and flexible in the future.
Users can now create gradients coming from one color (color to background), two colors (sequential scale), or three colors (divergent scales), hopefully, this will allow much more complex applications of colors and could provide more custom ways of dealing with that.
Neutral colors
One last thing that has been introduced is the concept of neutral colors. Within the color picker users are now able to pick from one of five neutral colors, a list of five grays going from lighter to darker. These colors can be considered theme-aware and they will automatically adjust according to the theme in use (light or dark). Instead of considering them a set of grays, they should be considered agnostic colors that go from “closer to background” to “further from background” so that contrasts will be respected on any theme.
Future phases
In 8.11 we released the first of a series of phases that will bring us closer to the final version of this feature. Even if the basis is there, there are still important updates that we plan to deliver in the near to mid-term.