Skip to content

Latest commit

 

History

History
433 lines (387 loc) · 9.86 KB

common-theme.md

File metadata and controls

433 lines (387 loc) · 9.86 KB

Common Component Themes

This guide discusses applying themes to common TOAST UI Chart components including chart titles, axes, legends, export menus, tooltips, and plots.

type Theme = {
  chart?: ChartTheme;
  title?: FontTheme;
  yAxis?: AxisTheme | AxisTheme[];
  xAxis?: AxisTheme;
  legend?: LegendTheme;
  tooltip?: TooltipTheme;
  plot?: PlotTheme;
  exportMenu?: ExportMenuTheme;
  series?: {
    // More details in respective guides
  };
}

Global Chart Themes

The theme.chart.fontFamily option is used to configure fonts that are used with everything in the chart. Fonts for title, axis, label text, and legend are configured using this font. If you use the theme.chart.backgroundColor option, you can set the background color of the chart.

fontFamily

  • default: 'Arial'

backgroundColor

  • default: #ffffff
type ChartTheme = {
  fontFamily?: string;
  backgroundColor?: string;
}
const options = {
  theme: {
    chart: {
      fontFamily: 'Verdana',
      backgroundColor: 'rgba(9, 206, 115, 0.1)',
    }
  }
};

image

Chart Title Themes

The theme.title can be used to style the chart's title.

type FontTheme = {
  fontSize?: number;
  fontFamily?: string;
  fontWeight?: string | number;
  color?: string;
};
Name Type Details
fontSize number Font size
fontFamily string Font family
fontWeight number | string Font weight
color string Text color 
const options = {
  theme: {
    title: {
      fontFamily: 'Comic Sans MS',
      fontSize: 45,
      fontWeight: 100,
      color: '#ff416d'
    }
  }
};

image

Axis Themes

theme.xAxis and theme.yAxis can be used to style respective axis. It can be used to change the axis title, label, and line styles.

type AxisTheme = {
  title?: {
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    color?: string;
  };
  label?: {
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    color?: string;
  };
  width?: number;
  color?: string;
};

type XAxisTheme = AxisTheme;
type YAxisTheme = AxisTheme | AxisTheme[];
Name Type Details
title object Style configuration for the axis title
label object Style configuration for the axis label
width number Axis line width
color string Axis line color 
const options = {
  theme: {
    xAxis: {
      title: {
        fontFamily: 'Impact',
        fontSize: 15,
        fontWeight: 400,
        color: '#ff416d'
      },
      label: {
        fontFamily: 'fantasy',
        fontSize: 11,
        fontWeight: 700,
        color: '#6EB5FF'
      },
      width: 2,
      color: '#6655EE'
    },
    yAxis: [
      {
        title: {
          fontFamily: 'Impact',
          fontSize: 17,
          fontWeight: 400,
          color: '#03C03C'
        },
        label: {
          fontFamily: 'cursive',
          fontSize: 11,
          fontWeight: 700,
          color: '#6655EE'
        },
        width: 3,
        color: '#88ddEE'
      },
      {
        title: {
          fontFamily: 'Comic Sans MS',
          fontSize: 13,
          fontWeight: 600,
          color: '#00a9ff'
        },
        label: {
          fontFamily: 'cursive',
          fontSize: 11,
          fontWeight: 700,
          color: '#FFABAB'
        },
        width: 3,
        color: '#AFFCCA'
      }
    ]
  }
};

image

Legend Themes

The theme.legend can be used to style texts displayed in the legends.

type LegendTheme = {
  label?: {
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    color?: string;
  };
};
const options = {
  theme: {
    legend: {
      label: {
        fontFamily: 'cursive',
        fontSize: 15,
        fontWeight: 700,
        color: '#ff416d'
      }
    }
  }
};

image

Tooptip Themes

The theme.tooltip can be used to style the tooltip.

type TooltipTheme = {
  background?: string;
  borderColor?: string;
  borderWidth?: number;
  borderStyle?: string;
  borderRadius?: number;
  header?: {
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    color?: string;
  };
  body?: {
    fontSize?: number;
    fontFamily?: string;
    fontWeight?: string | number;
    color?: string;
  };
};
Name Type Details
background string Background color
borderColor string Border color
borderWidth number Border width
borderStyle string Border style; available options can be found in this MDN link
borderRadius number Border radius
header object Styles for text displayed in the tooltip header area
body object Styles for text displayed in the tooltip body area 
const options = {
  theme: {
    tooltip: {
      background: '#80CEE1',
      borderColor: '#3065AC',
      borderWidth: 10,
      borderRadius: 20,
      borderStyle: 'double',
      header: {
        fontSize: 15,
        fontWeight: 700,
        color: '#333333',
        fontFamily: 'monospace',
      },
      body: {
        fontSize: 11,
        fontWeight: 700,
        color: '#a66033',
        fontFamily: 'monospace',
      }
    }
  }
};

image

Plot Themes

The theme.plot can be used to style the plot's background and lines.

type PlotTheme = {
  lineColor?: string;
  lineWidth?: number;
  dashSegments?: number[];
  backgroundColor?: string;
  vertical?: {
    lineColor?: string;
    lineWidth?: number;
    dashSegments?: number[];
  };
  horizontal?: {
    lineColor?: string;
    lineWidth?: number;
    dashSegments?: number[];
  };
};
Name Type Details
lineColor string Line color
lineWidth number Line width
dashSegments number[] dashSegment values for the plot lines
backgroundColor string Background color for the plot area
vertical object Styles for the plot lines drawn vertically
horizontal object Styles for the plot lines drawn horizontally 
const options = {
  theme: {
    plot: {
      vertical: {
        lineColor: 'rgba(60, 80, 180, 0.3)',
        lineWidth: 5,
        dashSegments: [5, 20],
      },
      horizontal: {
        lineColor: 'rgba(0, 0, 0, 0)',
      },
      backgroundColor: 'rgba(60, 80, 180, 0.1)'
    }
  }
};

image

Export Menu Themes

The theme.exportMenu can be used to style the export button and the menu box.

type ExportMenuTheme = {
  button?: {
    backgroundColor?: string;
    borderRadius?: number;
    borderWidth?: number;
    borderColor?: string;
    xIcon?: {
      color?: string;
      lineWidth?: number;
    };
    dotIcon?: {
      color?: string;
      width?: number;
      height?: number;
      gap?: number;
    };
  };
  panel?: {
    borderRadius?: number;
    borderWidth?: number;
    borderColor?: string;
    header?: {
      fontSize?: number;
      fontFamily?: string;
      fontWeight?: string | number;
      color?: string;
      backgroundColor?: string;
    };
    body?: {
      fontSize?: number;
      fontFamily?: string;
      fontWeight?: string | number;
      color?: string;
      backgroundColor?: string;
    };
  };
};
Name Type Details
button object Styles used for the export button
button.backgroundColor string Button background color
button.borderRadius number Button border radius
button.borderWidth number Button border width
button.borderColor string Button border color
button.xIcon object Styles used for the x icon
button.dotIcon object Styles used for the dot icon
panel object Styles used for the panel that is displayed when the export button is clicked
panel.borderRadius number Menu panel border radius
panel.borderWidth number Menu panel border width
panel.borderColor string Menu panel border color
panel.header object Styles used for the menu panel header
panel.body object Styles used for the menu panel body 
const options = {
  theme: {
    exportMenu: {
      button: {
        backgroundColor: '#ff0000',
        borderRadius: 5,
        borderWidth: 2,
        borderColor: '#000000',
        xIcon: {
          color: '#ffffff',
          lineWidth: 3,
        },
        dotIcon: {
          color: '#ffffff',
          width: 10,
          height: 3,
          gap: 1,
        },
      },
      panel: {
        borderColor: '#ff0000',
        borderWidth: 2,
        borderRadius: 10,
        header: {
          fontSize: 15,
          fontFamily: 'fantasy',
          color: '#ffeb3b',
          fontWeight: 700,
          backgroundColor: '#673ab7',
        },
        body: {
          fontSize: 12,
          fontFamily: 'fantasy',
          color: '#ff0000',
          fontWeight: '500',
          backgroundColor: '#000000',
        },
      },
    },
  },
};
Before Click After Click
image image