CODEWITHSUNDEEP
apache-superset
Youfa Mao
Youfa Mao

Reputation: 159

how to change apache superset's chart's background color?

Per How to Change Apache Superset Template from the Superset User Interface? , I was able to change the CSS template for Superset dashboard. But the charts inside the dashboard are not affected. e.g. most of the charts have white colored background(e.g. Piechart) and some people dislike it. How to change the chart background color? I mean change it for all charts or for one chart. The background I'd like to change in Apache Superset

Upvotes: 4

Views: 13411

Answers (3)

Ayoub Bensakhria
Ayoub Bensakhria

Reputation: 986

Another solution in React is to achieve color inversion based on a darkMode prop, you can use CSS filters and conditional class names.

Define CSS for Dark Mode:

/* SupersetDashboard.css */
.dark-mode {
  filter: invert(100%) hue-rotate(180deg); /* Adjust hue-rotate as needed */
}

And then Apply Conditional Class in React Component:

Use the darkMode prop to conditionally apply the dark-mode class to your div. Here’s how you can set it up:

import React from 'react';
import './SupersetDashboard.css'; // Import your CSS file

const SupersetDashboard = ({ dashboardId, darkMode = true }) => {
/* some component content logic here */
  return (
    <div
      id="dashboard-container"
      className={`superset-dashboard ${darkMode ? 'dark-mode' : ''}`}
      style={{
        width: '100%',
        height: '100%',
        maxWidth: '100%',
        position: 'relative',
        overflow: 'auto',
      }}
    />
  );
};

export default SupersetDashboard;

Upvotes: 1

ibrahim
ibrahim

Reputation: 3414

Easiest solution for me is using dark reader extension.

Upvotes: 1

Evan Rusackas
Evan Rusackas

Reputation: 614

Disclaimer: This should work, but is a bit hacky and could have long-term support implications:

I've been fiddling with a "dark mode" dashboard just to kick the tires on this. Here's a screenshot just for fun:

Superset dark mode example

So... what did I do?

  1. Click "Edit Dashboard" in the top right of your screenshot
  2. When in edit mode, the top right menu has an option to "Edit CSS"
  3. Use your browser's inspector to hack away! That said, here are a couple of key ingredients:
    • .dashboard-component{ background: whatever} - sets the main background of each viz card, but you'll still see many components still have white backgrounds within these wrappers.
    • .slice_container svg{ background-color: transparent !important; } - this overrides the white background of the components I ran into (including Pie charts!).

If viz components use SVG you can get pretty clever with inspecting/overriding various bits. A couple of gotchas with the above:

  1. If a viz component contains multiple SVG elements, this may have side effects.
  2. If a viz uses canvas instead of svg you will run into more trouble

In the worst case scenario, you may need to check out the superset-ui-plugins repo and make tweaks. This dev process isn't super straightforward, but some of us are working to improve that.

Upvotes: 5

Related Questions