Changing chart colors in Dashboard Studio with Matplotlib colormaps

Last updated
Save as PDF
Share
1. Share
2. Tweet
3. Share

You've gathered your data, created your queries, and set up a great dashboard. But the colors in your charts aren't exactly what you're looking for. You might want to adjust them for a number of reasons:

Using a color palette that sticks to your company's brand guidelines.
Using a color palette that matches another standard in your team.
Using a specific background color to prevent visual mismatch between the information represented and the colors shown.

You might have several fields plotted, and it might not be feasible to change them one by one.

Solution

Here's some sample data that we're going to adjust.

You can use the open-source tool Matplotlib to adjust these colors. Matplotlib is a well known plotting library in Python. It contains not only charts and visualization types, but also several colormaps.

Use the following code snippet to generate a list of colors based on one of the colormaps:

import matplotlib.pyplot as plt
import matplotlib.colors as mcolors
import json
# cmap will be the name of our colormap
# notice all colormaps starts with plt.cm
# in this example the Blues colormap is plt.cm.Blues
cmap = plt.cm.Blues
# num_colors will be the number of fields we have plotted already
num_colors = 5
colors = [cmap(i / (num_colors - 1)) for i in range(num_colors)]
hex_colors = [mcolors.rgb2hex(color) for color in colors]
print(json.dumps(hex_colors))

Choose the colormap you want to use. In this example, we'll select the Blues colormap.

Using the above code provides the following output in the terminal:

["#f7fbff", "#c6dbef", "#6aaed6", "#2070b4", "#08306b"]

Save the above array and return to your dashboard. Click on the panel and click Expand editor.

45dbd16e-021a-46c5-9765-269f74bc6389 (1).png

Look for the options object. This is where you'll make changes.

Specify a seriesColors array containing your list of colors. For example:

    "options": {
        "seriesColors": ["#f7fbff", "#c6dbef", "#6aaed6", "#2070b4", "#08306b"]
    },

Click Save and go back to the dashboard. Your results should look like this: