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:
Created 5 years ago
Comments:10 (4 by maintainers)

Top 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?