Theming

All of Keen components could be customized in context of features and visual aspects.

The look of visualization is described with self descriptive Theme interface that could be easily adjusted.

• By default all of components use official Keen theme.
• You can create one generic theme for all charts or specify unique visual properties for each of them separately.

API

Interfaces

Axis

Interface definition for styling Axis properties like for eg. labels, line colors and tick sizes. Could be applied only to charts that uses cartesian coordinate system.

type Axis = {
  enabled: boolean;
  tickSize: number;
  tickPadding: number;
  stroke: number;
  color: string;
  labels: Labels;
  title: AxisTitle;
};

Grid

Interface definition for styling Grid properties. Could be applied only to charts that uses cartesian coordinate system.

type Grid = {
  enabled: boolean;
  color: string;
};

Tooltip

Interface definition for styling Tooltip properties.

Support two modes light and dark - for reference check <Tooltip /> component documentation.

Each of charts could contain a different tooltip content.

type Tooltip = {
  enabled: boolean;
  mode: 'light' | 'dark';
  labels: {
    typography: Typography;
  };
};

Labels

Interface definition for styling Labels properties.

type Labels = {
  enabled: boolean;
  typography: Typography;
  radiusAngle: number;
};

Axis Title

Interface for styling AxisTitle properties.

type AxisTitle = {
  alignment: 'top' | 'bottom' | 'left' | 'right' | 'center';
  typography: Typography;
};

Typography

Interface for styling all text aspects like font size, color, weight etc.

Used globally for most of widgets text elements.

type Typography = {
  fontStyle: 'normal' | 'italic';
  fontWeight: 'normal' | 'bold';
  fontSize: number;
  fontColor: string;
  fontFamily: string;
  lineHeight: string;
};

Icon

The interface used to describe icon properties.

• For reference check the <Icon /> component documentation.

type Icon = {
  color: string;
  type: IconType;
};

type IconType =
  | 'arrow-up'
  | 'arrow-down'
  | 'caret-down'
  | 'caret-up'
  | 'caret-left'
  | 'caret-right'
  | 'brand'
  | 'question-mark'
  | 'cursor-solid'
  | 'cursor-outline'
  | 'click-solid'
  | 'click-outline'
  | 'eye-solid'
  | 'eye-outline'
  | 'user-solid'
  | 'user-outline'
  | 'users-solid'
  | 'users-outline';

Funnel

Interface used to describe funnel chart theme.

type Funnel = {
  header: {
    value: {
      enabled: boolean;
      typography: Typography;
    };
    title: {
      typography: Typography;
    };
    badge: {
      enabled: boolean;
      typography: Typography;
      backgroundColor: string;
    };
    backgroundColor: string;
  };
  step: {
    backgroundColor: string;
  };
};

Metric

Interface used to describe metric chart theme.

type Metric = {
  value: {
    typography: Typography;
  };
  caption: {
    typography: Typography;
  };
  excerpt: {
    icons: {
      increase: Icon;
      decrease: Icon;
    };
    backgroundColor: string;
    typography: Typography;
  };
  icon?: {
    enabled: boolean;
    position: 'top' | 'center' | 'bottom';
    margins: Margins;
    style: 'solid' | 'regular';
    type: IconType;
  };
};

Features

• Icon properties
• Caption typography
• Value typography
• Excerpt element background, icons and typography

Table

Interface used to describe table chart theme.

type Table = {
  header: {
    typography: Typography;
  };
  body: {
    typography: Typography;
  };
};

Features

• Table header typography
• Table rows and cells typography

Gauge

Interface used to describe gauge chart theme.

type Gauge = {
  labels: {
    enabled: boolean;
    typography: Typography;
  };
  border: {
    backgroundColor: string;
  };
  total: {
    enabled: boolean;
    typography: Typography;
  };
};

Pie

Interface used to describe pie chart theme.

type Pie = {
  labels: {
    enabled: boolean;
    typography: Typography;
  };
};

Donut

Interface used to describe donut chart theme.

type Donut = {
  labels: {
    enabled: boolean;
    typography: Typography;
  };
  total: {
    enabled: boolean;
    label: {
      typography: Typography;
    };
    value: {
      typography: Typography;
    };
  };
};

Choropleth

Interface used to describe choropleth chart theme.

type Choropleth = {
  map: {
    stroke: string;
  };
  graticule: Grid;
  sphere: {
    enabled: boolean;
    backgroundColor: string;
  };
};