We’ve put together a quick cheat-sheet to help with the most frequently-asked styling questions. Have one we haven’t covered? Reach out in Slack and we’re happy to help!

Custom Chart Colors - Constants

If you’ve built off of our Vanilla Components repo, as most of our clients have, the easiest way to tweak your chart colors is to edit the values in src/components/constants.ts where you’ll find a COLORS array that you can add to, remove from, or change entirely. These color values are referenced by the various chart components provided in the repo.

Custom Classes / CSS

Looking for more granular control of your Embeddable components? As with any React component, you can always add className= to your tag and insert individual classes that way. Embeddable uses Tailwind CSS under the hood, and accepts all of the utilities classes in its documentation. Additionally, you can add custom class names as like and then reference them in src/components/vanilla/index.css. You’ll probably notice that it includes a few Tailwind imports and also contains some existing classes/overrides for a few 3rd party libraries. We recommend creating your own css file and importing it with css imports, but you can also just add your styles to the bottom of that file.

Custom Fonts

If you’ve looked into src/components/constants.ts, you’ve probably also seen that you can define custom fonts in a FONTS object there. These values are then referenced in src/components/hooks.useFont.ts where you can adjust the URI to point to the font file storage solution of your choice.

Using Client Context to Swap Styles

While you can use Client Context for all kinds of things, one of the most popular use cases is swapping styles based on a particular context. There are two ways you can go about this: the first is by referencing Client Context in any given component to give it a specific class name, and then styling it via CSS values specific to that single class name, like this:

// src/components/vanilla/charts/myChart.tsx
export default (props: Props) => {
  const { clientContext } = props;
  const className = clientContext?.enableSpecialPieChart ?
    'specialPieChart' : '';
  const style = { height: '100%'};
  return (
    <div className={className} style={style}>
      {PieChart(props)}
    </div>
  );
}

// src/components/mystyles.css
.specialPieChart {
  background-color: #A00;
  font-size: 2rem;
  font-weight: 700;
}

Alternately you can take advantage of the cascade by adding a class name to the Container component in which Embeddable components are wrapped, and then referencing it in your CSS, like this:

// src/components/vanilla/Container.tsx

/* ... existing container code */
const { clientContext } = props;
const className = clientContext?.darkmode ? 'dark' : '';
/* ... existing container code */
return (
  <div className={className}>
  {/* ... existing container code */}
  </div>
);
/* ... existing container code */

//src/components/vanilla/charts/myChart.tsx
export default (props: Props) => {
  return (
    <div className="myCustomClass" style={style}>
      {PieChart(props)}
    </div>
  );
}

//src/components/mystyles.css
.myCustomClass {
  background-color: #F3F3F3;
}
.dark {
  color: #FFFFFF;
}
.dark .myCustomClass {
  background-color: #3F3F3F;
}

For testing purposes, you can set client context values by editing /src/embeddable.com/presets/client-contexts.cc.yml … for example, like this:

- name: Light
  clientContext:
    darkMode: false
  canvas: 
    background: '#fff'

- name: Dark
  clientContext:
    darkMode: true
  canvas: 
    background: '#000'