--- title: "Themes" framework: angular version: "14.1.0" --- # Themes Themes allow you to customise the appearance of your charts. They provide defaults for different properties of the chart that will be used unless overridden by the chart options. ## Using Stock Themes Every chart uses the `'ag-default'` theme unless configured otherwise. ```js AgCharts.create({ theme: 'ag-default', // optional, implied //... }); ``` > **Note** > > [Financial Charts](https://www.ag-grid.com/charts/angular/financial-charts/) use the `ag-financial` and `ag-financial-dark` themes only. The following themes are provided out-of-the-box: ```ts type AgChartThemeName = | 'ag-default' | 'ag-default-dark' | 'ag-sheets' | 'ag-sheets-dark' | 'ag-polychroma' | 'ag-polychroma-dark' | 'ag-vivid' | 'ag-vivid-dark' | 'ag-material' | 'ag-material-dark'; ``` In the example below, you can click the buttons to change the theme used in the chart. #### Stock Themes ```ts // Angular entry point file import '@angular/compiler'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app.component'; bootstrapApplication(AppComponent); ``` [Live example: Stock Themes](https://www.ag-grid.com/charts/angular/themes/examples/stock-themes) ## Making Custom Themes You can create your own theme, which builds upon an existing theme and allows you to change as many or as few properties as you like. A custom theme is an object with the following optional properties: - `baseTheme` - The name of the theme to base this theme upon (if not specified, the `'ag-default'` theme is used). - `palette` - The palette to use, replaces the palette of the base theme. - `params` - The theme parameters to set global styles. - `overrides` - The object to be merged with the base theme's defaults and override them. See the [Themes API page](https://www.ag-grid.com/charts/themes-api/) for the complete options structure. ## Palette A palette is the array of colours used for the data, for example the bars in a bar series chart. If there are more groups of data than colours in the palette, the colours will be repeated. #### Palette ```ts // Angular entry point file import '@angular/compiler'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app.component'; bootstrapApplication(AppComponent); ``` [Live example: Palette](https://www.ag-grid.com/charts/angular/themes/examples/palettes) ```js const myTheme = { palette: { fills: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'], strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'], }, }; ``` ## Parameters The `params` object is used to set styles across the whole chart in one place. - Set the font with `fontFamily` and `fontSize`. - Use `foregroundColor`, `backgroundColor` and `accentColor` to set the main colours on the chart. All other colours will default to a mix of these three. - Use specific params to adjust tooltips, menus, panels, toolbars, buttons and text inputs, for example `tooltipBackgroundColor`. Please see the [Themes API reference](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-params) for the full list of available options. #### Theme Parameters ```ts // Angular entry point file import '@angular/compiler'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app.component'; bootstrapApplication(AppComponent); ``` [Live example: Theme Parameters](https://www.ag-grid.com/charts/angular/themes/examples/theme-parameters) ```js const myTheme = { palette: { fills: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'], strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'], }, params: { foregroundColor: '#262a33', backgroundColor: '#fff1e5', accentColor: '#0d7680', fontFamily: [{ googleFont: 'DM Serif Text' }, 'Georgia', 'sans-serif'], fontSize: 14, tooltipBackgroundColor: '#fff7ef', tooltipTextColor: '#262a33', }, }; ``` In the above example: - The three main colours are defined with some additional specific colours for chrome elements. - All text elements are set to the same font family. - All text, except the titles and footer, are set to the same font size. ### Colour References Any colour parameter can reference another instead of a fixed value, keeping related colours in sync. See [Colours](https://www.ag-grid.com/charts/angular/colours/) for all accepted colour value forms. #### Colour References ```ts // Angular entry point file import '@angular/compiler'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app.component'; bootstrapApplication(AppComponent); ``` [Live example: Colour References](https://www.ag-grid.com/charts/angular/themes/examples/theme-colour-references) The chart `textColor` is derived from the controls. With no `onto`, `mix` fades the referenced colour towards transparency. ```js const myTheme = { params: { accentColor: '#0d7680', subtleTextColor: { ref: 'textColor', mix: 0.6 }, tooltipBackgroundColor: { ref: 'accentColor', mix: 0.1, onto: 'backgroundColor' }, }, }; ``` - `{ ref: 'accentColor' }` - use another parameter's value. - `{ ref: 'accentColor', mix: 0.5 }` - that colour at `50%` opacity. - `{ ref: 'accentColor', mix: 0.1, onto: 'backgroundColor' }` - blend `ref` onto `onto`, weighted by `mix`. - `{ ref: 'accentColor', mix: 0.1, ontoColor: 'var(--brand)' }` - blend `ref` onto a literal colour or CSS variable, weighted by `mix`. ### Borders Border parameters use a consistent `{ width, color }` shape across every element. #### Borders ```ts // Angular entry point file import '@angular/compiler'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app.component'; bootstrapApplication(AppComponent); ``` [Live example: Borders](https://www.ag-grid.com/charts/angular/themes/examples/theme-borders) The controls style `buttonBorder`, shown on the zoom buttons. ```js const myTheme = { params: { borderColor: '#cccccc', borderWidth: 1, borderRadius: 4, buttonBorder: { width: 2, color: { ref: 'accentColor' } }, buttonBorderRadius: 8, }, }; ``` - `borderColor`, `borderWidth`, `borderRadius` - global defaults for bordered elements (buttons, inputs, menus, tooltips). - `Border` - `boolean` to toggle, or `{ width, color }` to override. `color` accepts a [colour reference](#colour-references). - `BorderRadius` - corner radius, inheriting from `borderRadius`. ## Overrides The `overrides` object is similar in its structure to the chart's options and is used as follows: - Items in the `overrides.common` object are applied to all chart types. - Items in the series specific object (e.g. `overrides.line`), are applied to charts of that series type. - Series specific properties are found in the `series` object of the series type (e.g. `overrides.line.series`). - The `axes` config contains one object for each axis type. #### Custom Theme ```ts // Angular entry point file import '@angular/compiler'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app.component'; bootstrapApplication(AppComponent); ``` [Live example: Custom Theme](https://www.ag-grid.com/charts/angular/themes/examples/custom-theme) ```js const myTheme = { palette: { fills: ['#5C2983', '#0076C5', '#21B372', '#FDDE02', '#F76700', '#D30018'], strokes: ['black'], }, overrides: { common: { title: { fontSize: 24, }, }, bar: { series: { label: { enabled: true, color: 'black', }, strokeWidth: 1, }, }, }, }; ``` In the above example: - A different palette of colours and strokes is provided for all series to use. - The font size of the title is increased. - The `bar` series has specific label and stroke options set. ## Advanced Custom Theme #### Advanced Themes ```ts // Angular entry point file import '@angular/compiler'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app.component'; bootstrapApplication(AppComponent); ``` [Live example: Advanced Themes](https://www.ag-grid.com/charts/angular/themes/examples/advanced-theme) ```js const myTheme = { palette: { fills: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'], strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'], }, params: { foregroundColor: '#262a33', backgroundColor: '#fff1e5', accentColor: '#0d7680', chromeBackgroundColor: '#fff7ef', chromeTextColor: '#262a33', fontFamily: 'Georgia, serif', fontSize: 14, }, overrides: { common: { title: { fontSize: 24, }, padding: { left: 70, right: 70, }, axes: { category: { line: { width: 4, }, }, number: { line: { width: 2, }, }, }, }, line: { series: { marker: { shape: 'circle', }, }, }, bar: { series: { label: { enabled: true, color: 'white', }, }, }, pie: { padding: { top: 40, bottom: 40, }, legend: { position: 'left', }, series: { calloutLabel: { enabled: true, }, calloutLine: { colors: ['#881008'], }, }, }, }, }; ``` In the above example: - A different palette of colours and strokes is provided for all series to use. - Some `param` global styles are specified. - Some `common` overrides are specified which apply to all chart types. - Different axes overrides are specified for `category` and `number` axes types. - Different series specific overrides are specified for `bar`, `line` and `pie` series. ## Figma Design System ![AG Charts Figma](https://www.ag-grid.com/charts/_astro/AG-Charts-Figma-Banner.CXE5NZHK.png) The [AG Grid Figma Design System](https://www.figma.com/community/file/1360600846643230092) contains AG Charts components and templates to aid you in mocking up and theming AG Charts applications. The design system contains UI components such as [tooltips](https://www.ag-grid.com/charts/angular/tooltips/), [menus](https://www.ag-grid.com/charts/angular/context-menu/), [navigators](https://www.ag-grid.com/charts/angular/navigator/), and [financial charts toolbars](https://www.ag-grid.com/charts/angular/financial-charts-toolbar/). There are also Figma assets to aid in the design of AG Charts [colour palettes](#palette). In addition, we supply a full range of components for mocking up [AG Grid integrated charts](https://ag-grid.com/react-data-grid/integrated-charts/) applications. Due to the limitations of Figma itself, we do not supply assets to mock up chart series. To get started with the Figma Design System, visit the [AG Grid Figma Design System Figma community page](https://www.figma.com/community/file/1360600846643230092) and click the "**Open in Figma**" button. > **Note** > > We supply the AG Grid Design System as a [Figma community file](https://www.figma.com/community/file/1360600846643230092). You will use the file by duplicating it to your Figma workspace. While we regularly update the AG Grid Design System, your duplicated files will not receive any updates automatically. > > For more information about how Figma community files function, please review the [Figma help pages on community files](https://help.figma.com/hc/en-us/articles/360038510873-Duplicate-Community-files). ### Figma Documentation & Video Tutorials You’ll find comprehensive documentation for the design system right within the Figma file. We have guides for getting started and pre-made chart templates. Further detailed information about how each chart component works is also within the Figma file. Watch our video on [Theming AG Charts in Figma with Variables and Tokens](https://youtu.be/KBCXZoNOtPA?si=GG_GIhx2Jr92sv6E). We also have a complete [playlist of in-depth videos](https://www.youtube.com/watch?v=yuT6sq68MII&list=PLsZlhayVgqNzE9G1yLLHQCRYSgDvx7Zo1) diving deeper into working with the AG Grid Figma design system. [Theming Charts with Variables and Tokens](https://www.youtube.com/watch?v=LsTOBSXs-aY) ### Figma Support AG Charts Enterprise customers can request support or suggest features and improvements via [Zendesk](https://ag-grid.zendesk.com/hc/en-us). Community users can file bug reports via our design system [GitHub repo issues](https://github.com/ag-grid/ag-grid-figma-design-system/issues).