Custom chart style of GraphicWalker

You can set the style of charts in GraphicWalker, GraphicRenderer, PureRenderer by using the vizThemeConfig option. The vizThemeConfig option can be an string for a builtin theme or an object for a custom theme.

The builtin themes are streamlit, g2, and vega.

streamlit theme

import { useMemo } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
import spec from './spec.json';
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return <PureRenderer type="local" rawData={data} visualConfig={spec[0].config} visualState={spec[0].encodings} visualLayout={spec[0].layout} vizThemeConfig="streamlit" />
}

g2 theme

import { useMemo } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
import spec from './spec.json';
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return <PureRenderer type="local" rawData={data} visualConfig={spec[0].config} visualState={spec[0].encodings} visualLayout={spec[0].layout} vizThemeConfig="g2" />
}

vega theme

import { useMemo } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
import spec from './spec.json';
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return <PureRenderer type="local" rawData={data} visualConfig={spec[0].config} visualState={spec[0].encodings} visualLayout={spec[0].layout} vizThemeConfig="vega" />
}

custom theme

You can custom your chart with your own theme. See the Vega-lite documentation (opens in a new tab) for more details.

import { useMemo } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
import spec from './spec.json';
 
const themeConfig = {
    light: {
        boxplot: { ticks: true },
        range: {
            category: { scheme: 'category20' },
            diverging: { scheme: 'redgrey' },
            heatmap: { scheme: 'lightmulti' },
            ordinal: { scheme: 'blues' },
            ramp: { scheme: 'blues' },
        },
    },
    dark: {
        boxplot: {
            ticks: {
                fill: "#d1d5db",
            },
            rule: {
                color: "#d1d5db",
            },
        },
        header: {
            titleColor: "#d1d5db",
            labelColor: "#d1d5db",
        },
        axis: {
            gridColor: "#666",
            domainColor: "#d1d5db",
            tickColor: "#d1d5db",
            labelColor: "#d1d5db",
            titleColor: "#d1d5db",
        },
        legend: {
            labelColor: "#d1d5db",
            titleColor: "#d1d5db",
        },
        view: {
            stroke: "#666",
        },
        range: {
            category: { scheme: 'pastel1' },
            diverging: { scheme: 'blueorangeView' },
            heatmap: { scheme: 'darkmulti' },
            ordinal: { scheme: 'darkblue' },
            ramp: { scheme: 'darkblue' },
        },
    },
};
 
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return <PureRenderer type="local" rawData={data} visualConfig={spec[0].config} visualState={spec[0].encodings} visualLayout={spec[0].layout} vizThemeConfig={themeConfig} />
}

API reference Custom Color of Graphic Walker