Custom Themes and Dark Mode

ChartFactor Toolkit
1

I am tasked with creating a “Dark Mode” for our entire ChartFactor dashboard. I know I can style individual charts, but I want to define a global theme object to pass to all visualizations.

Does anyone have a comprehensive JSON example of a theme object? I need to cover axis lines, grid colors, fonts, and the color palette.

2

You can create a reusable theme object and apply it via the .set(‘color’,…) API or inject it into your app’s state.

Here is a robust “Dark Theme” structure compatible with most standard CF charts (Bars, Lines, Scatter, etc.):

const darkTheme = {
    // Canvas background
    "background": "#1e1e1e",
    // KPI / Comparative specific
    "primaryValue": "#e10909",
    "secondaryValue": "#07f0e0",
    "comparisonValue": "#0ce63b",
    "labels": "#1309df",
    "upArrow": "#d1df04",
    "downArrow": "#e307f4"
};
// Usage
let color = cf.Color()
    // Data Series Palette
    .palette([
        "#ffffff",
        "#000000",
        "#cddc39",
        "#e91e63",
        "#9c27b0",
        "#2196f3",
        "#4caf50",
        "#ffeb3b"
    ])
    // set the theme object
    .theme(darkTheme);
// set the theme in the visulization
myChart1.set('color',color);
myChart2.set('color',color);
myChart3.set('color',color);

// Tooltip styles often need CSS overrides, 
const customTooltipCss = {
    "border-radius": "0px",
    "background-color": "black",
    "color": "white"
};
cf.tooltip.set(null, "red", customTooltipCss);

Note: For Pivot Tables and Raw Data Tables, themes work slightly differently because they use grid libraries. You can check the docs for table themes

3

That’s working well. I have a few tables available, so I’ll review the table documentation next.

One additional question: how can I customize the colors of the vertical and horizontal grid lines in the bar chart?

4

Well for that you can use the xAxis and yAxis properties to set some custom e-charts configs

.set("xAxis", {
    lines: {
        lineStyle: {
            color: "rgba(228, 23, 23, 1)",
        },
        show: true,
    }
})
.set("yAxis", {
    lines: {
        lineStyle: {
            color: "rgba(228, 23, 23, 1)",
        },
        show: true,
    }
})
5

Great!, that worked for me, thanks for your help