Embedded analytics SDK API
    Preparing search index...

    Type Alias MetabaseComponentTheme

    Theme options for customizing specific Metabase components and visualizations.

    type MetabaseComponentTheme = {
        cartesian: {
            goalLine: { label: { fontSize: string } };
            label: { fontSize: string };
            padding?: string;
            splitLine: { lineStyle: { color: string } };
        };
        collectionBrowser: {
            breadcrumbs: {
                expandButton: {
                    backgroundColor: {};
                    hoverBackgroundColor: {};
                    hoverTextColor: {};
                    textColor: {};
                };
            };
            emptyContent: {
                icon: {
                    height: CSSProperties["width"];
                    width: CSSProperties["width"];
                };
                subtitle: { fontSize: CSSProperties["fontSize"] };
                title: { fontSize: CSSProperties["fontSize"] };
            };
        };
        dashboard: {
            backgroundColor: string;
            card: { backgroundColor: string; border?: string };
            gridBorderColor?: string;
        };
        number?: {
            value?: { fontSize?: CSSProperties["fontSize"]; lineHeight?: string };
        };
        pivotTable: {
            cell: { fontSize: string };
            rowToggle: { backgroundColor: string; textColor: string };
        };
        popover: { zIndex?: number };
        question: {
            backgroundColor: string;
            toolbar?: { backgroundColor?: string };
        };
        table: {
            cell: { backgroundColor?: string; fontSize: string; textColor: string };
            idColumn?: { backgroundColor?: string; textColor: string };
            stickyBackgroundColor?: string;
        };
        tooltip?: {
            backgroundColor?: string;
            focusedBackgroundColor?: string;
            secondaryTextColor?: string;
            textColor?: string;
        };
    }
    Index

    Properties

    cartesian collectionBrowser dashboard number? pivotTable popover question table tooltip?

    Properties

    cartesian: {
        goalLine: { label: { fontSize: string } };
        label: { fontSize: string };
        padding?: string;
        splitLine: { lineStyle: { color: string } };
    }

    Cartesian charts

    Type declaration

    • goalLine: { label: { fontSize: string } }
      • label: { fontSize: string }
        • fontSize: string

          Font size of goal line labels

    • label: { fontSize: string }
      • fontSize: string

        Labels used in cartesian charts, such as axis ticks and series.

    • Optionalpadding?: string

      Padding around the chart.

    • splitLine: { lineStyle: { color: string } }
    collectionBrowser: {
        breadcrumbs: {
            expandButton: {
                backgroundColor: {};
                hoverBackgroundColor: {};
                hoverTextColor: {};
                textColor: {};
            };
        };
        emptyContent: {
            icon: { height: CSSProperties["width"]; width: CSSProperties["width"] };
            subtitle: { fontSize: CSSProperties["fontSize"] };
            title: { fontSize: CSSProperties["fontSize"] };
        };
    }
    dashboard: {
        backgroundColor: string;
        card: { backgroundColor: string; border?: string };
        gridBorderColor?: string;
    }

    Type declaration

    • backgroundColor: string
    • card: { backgroundColor: string; border?: string }
      • backgroundColor: string
      • Optionalborder?: string

        Add custom borders to dashboard cards when set. Value is the same as the border property in CSS, such as "1px solid #ff0000". This will replace the card's drop shadow.

    • OptionalgridBorderColor?: string

      Border color of the dashboard grid, shown only when editing dashboards. Defaults to colors.border

    number?: {
        value?: { fontSize?: CSSProperties["fontSize"]; lineHeight?: string };
    }

    Number chart

    Type declaration

    • Optionalvalue?: { fontSize?: CSSProperties["fontSize"]; lineHeight?: string }

      Value displayed on number charts. This also applies to the primary value in trend charts.

    pivotTable: {
        cell: { fontSize: string };
        rowToggle: { backgroundColor: string; textColor: string };
    }

    Pivot table *

    Type declaration

    • cell: { fontSize: string }
      • fontSize: string

        Font size of cell values, defaults to ~12px

    • rowToggle: { backgroundColor: string; textColor: string }

      Button to toggle pivot table rows

    popover: { zIndex?: number }

    Popover

    Type declaration

    • OptionalzIndex?: number

      z-index of overlays. Useful for embedding components in a modal. Defaults to 200.

    question: { backgroundColor: string; toolbar?: { backgroundColor?: string } }

    Type declaration

    • backgroundColor: string

      Background color for all questions

    • Optionaltoolbar?: { backgroundColor?: string }

      Toolbar of the default interactive question layout

    table: {
        cell: { backgroundColor?: string; fontSize: string; textColor: string };
        idColumn?: { backgroundColor?: string; textColor: string };
        stickyBackgroundColor?: string;
    }

    Data tables *

    Type declaration

    • cell: { backgroundColor?: string; fontSize: string; textColor: string }
      • OptionalbackgroundColor?: string

        Default background color of cells, defaults to background

      • fontSize: string

        Font size of cell values, defaults to ~12.5px

      • textColor: string

        Text color of cells, defaults to text-primary.

    • OptionalidColumn?: { backgroundColor?: string; textColor: string }
      • OptionalbackgroundColor?: string

        Background color of ID column, defaults to lighten(brand)

      • textColor: string

        Text color of ID column, defaults to brand.

    • OptionalstickyBackgroundColor?: string

      Background color of the table header that stays fixed while scrolling. Defaults to white if no cell background color is set

    tooltip?: {
        backgroundColor?: string;
        focusedBackgroundColor?: string;
        secondaryTextColor?: string;
        textColor?: string;
    }

    Tooltip

    Type declaration

    • OptionalbackgroundColor?: string

      Tooltip background color.

    • OptionalfocusedBackgroundColor?: string

      Tooltip background color for focused rows.

    • OptionalsecondaryTextColor?: string

      Secondary text color shown in the tooltip, e.g. for tooltip headers and percentage changes.

    • OptionaltextColor?: string

      Tooltip text color.

    Settings

    On This Page

    Properties