question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Superset how to support custom add Color Scheme?

See original GitHub issue

Well, I am having a problem now, I want to add a Color Scheme to Chart Options, but I have tried a lot of methods that can’t solve this problem, including modifying ${SUPERSET_HOME}/static/assets/src/modules/colors.js, I tried to add the following code to it

export const newColorScheme = [
  '#a4f2b8',
  '#abc8fa',
];

export const ALL_COLOR_SCHEMES = {
  bnbColors,
  d3Category10,
  d3Category20,
  d3Category20b,
  d3Category20c,
  googleCategory10c,
  googleCategory20c,
  lyftColors,
  newColorScheme,
};

This is a screenshot of the problem I encountered:

color scheme

Superset version incubator-superset-0.26.3

The result I want is that I can choose my custom Color in Color Scheme.

If you want to reproduce, you can click Charts in the menu bar, then select a chart, click Style, you can see Color Scheme, you can choose a color scheme, as shown below:

color scheme select

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

5reactions
breizh24commented, Sep 3, 2019

@ilyakam To add custom schemes, in case of a “Categorical Scheme” you need to import the CategoricalScheme class from the module “@superset-ui/color”, here is an example:

import { CategoricalScheme } from '@superset-ui/color';

const schemes = [
  {
    id: 'testColors',
    label: 'Test Colors',
    colors: ['#2d51a3', '#7d7f82', '#2061e0', '000000'],
  },
].map(s => new CategoricalScheme(s));

export default schemes;

then you need to import this into /superset/assets/src/setup/setupColors.js and add it to the already existing schemes, you should end up with something like this:

import testColors from '../myColors/myColorSchemes';

export default function setupColors() {
  // Register color schemes
  const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
  [airbnb, categoricalD3, google, lyft, testColors].forEach((group) => {
    group.forEach((scheme) => {
      categoricalSchemeRegistry.registerValue(scheme.id, scheme);
    });
  });
  categoricalSchemeRegistry.setDefaultKey('bnbColors');

1reaction
toilvcommented, Nov 30, 2019

Could someone take a couple of minutes to guide us how to do that ? What requirements ? How can we customize in production enviroment with WSGI HTTP Server?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I change the colour theme for Apache Superset
Starting from Superset 1.1.0 it is possible to customize theme via the THEME_OVERRIDES in superset_config.py configuration file.
Read more >
Apache Superset/Preset :dashboard, customize series labels ...
This video shows how to customize label colors in a dashboard to keep consistency between the charts.
Read more >
Superset how to support custom add Color Scheme?
... custom schemes, in case of a "Categorical Scheme" you need to import the CategoricalScheme class from the module "@superset-ui/color", ...
Read more >
Customization of Graph Colors - Analytica Wiki
Customization of Graph Colors · Display a graph with the Key index. · Right-click on a curve, bar, data point, or item in...
Read more >
superset/config.py - Google Git
EXTRA_CATEGORICAL_COLOR_SCHEMES is used for adding custom categorical color schemes. # example code for "My custom warm to hot" color scheme.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found