or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdaxes-scaling.mdchart-management.mdexport-accessibility.mdindex.mdinteractivity-events.mdseries-data.mdstyling-theming.md
tile.json

styling-theming.mddocs/

Styling and Theming

Comprehensive styling system with built-in themes, responsive design support, and extensive customization options for colors, fonts, and visual elements.

Capabilities

Global Configuration

Functions for setting and managing global chart options and defaults.

/**
 * Set global default options for all charts
 * @param options - Global options to merge with defaults
 */
function setOptions(options: Options): void;

/**
 * Get current global options
 * @returns Current global options object
 */
function getOptions(): Options;

Color Management

Advanced color manipulation and management utilities.

class Color {
  /**
   * Create new Color instance
   * @param input - Color input (hex, rgb, hsl, etc.)
   */
  constructor(input: ColorType);

  /**
   * Brighten or darken the color
   * @param alpha - Brightness factor (-1 to 1)
   * @returns New Color instance
   */
  brighten(alpha: number): Color;

  /**
   * Set color opacity/alpha
   * @param alpha - Opacity value (0 to 1)
   * @returns New Color instance
   */
  setOpacity(alpha: number): Color;

  /**
   * Get color as hex string
   * @returns Hex color string
   */
  get(): string;

  /**
   * Get color as RGBA object
   * @returns RGBA color object
   */
  rgba: RGBAColorObject;

  /** Raw color input */
  input: ColorType;

  /** Parsed stops for gradients */
  stops: Array<Array<number | string>>;
}

/**
 * Create Color instance from input
 * @param input - Color input
 * @returns Color instance
 */
function color(input: ColorType): Color;

type ColorType = ColorString | GradientColorObject | PatternObject;
type ColorString = string;

Gradient and Pattern Support

Configuration for gradient fills and pattern overlays.

interface GradientColorObject {
  /** Gradient direction */
  linearGradient?: LinearGradientColorObject;
  
  /** Radial gradient configuration */
  radialGradient?: RadialGradientColorObject;
  
  /** Color stops */
  stops: Array<Array<number | string>>;
}

interface LinearGradientColorObject {
  /** Start x coordinate (0-1) */
  x1?: number;
  
  /** Start y coordinate (0-1) */
  y1?: number;
  
  /** End x coordinate (0-1) */
  x2?: number;
  
  /** End y coordinate (0-1) */
  y2?: number;
}

interface PatternObject {
  /** Pattern image path */
  path?: string | SVGPathObject;
  
  /** Pattern width */
  width?: number;
  
  /** Pattern height */
  height?: number;
  
  /** Pattern color */
  color?: ColorString;
  
  /** Pattern opacity */
  opacity?: number;
  
  /** Pattern ID */
  id?: string;
}

CSS Styling

Utilities for applying CSS styles to chart elements.

/**
 * Apply CSS styles to DOM element
 * @param el - Target element
 * @param styles - CSS styles object
 */
function css(el: HTMLDOMElement | SVGDOMElement, styles: CSSObject): void;

/**
 * Get computed style value
 * @param el - Target element
 * @param prop - CSS property name
 * @param toInt - Whether to parse as integer
 * @returns Style value
 */
function getStyle(el: HTMLDOMElement, prop: string, toInt?: boolean): number | string | undefined;

interface CSSObject {
  [key: string]: string | number | undefined;
}

Theme System

Built-in Themes

Highcharts includes 12 pre-built themes for different visual styles.

// Loading themes
import 'highcharts/themes/dark-unica';
import 'highcharts/themes/dark-blue';
import 'highcharts/themes/dark-green';
import 'highcharts/themes/avocado';
import 'highcharts/themes/gray';
import 'highcharts/themes/grid';
import 'highcharts/themes/grid-light';
import 'highcharts/themes/high-contrast';
import 'highcharts/themes/sand-signika';
import 'highcharts/themes/skies';
import 'highcharts/themes/sunset';

Custom Theme Creation

// Define custom theme
const customTheme = {
  colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5'],
  chart: {
    backgroundColor: '#f8f8f8',
    borderColor: '#cccccc',
    borderWidth: 1,
    className: 'custom-chart'
  },
  title: {
    style: {
      color: '#274b6d',
      fontSize: '16px',
      fontWeight: 'bold'
    }
  },
  subtitle: {
    style: {
      color: '#666666'
    }
  },
  legend: {
    itemStyle: {
      color: '#274b6d'
    }
  },
  xAxis: {
    gridLineColor: '#e6e6e6',
    lineColor: '#ccd6eb',
    tickColor: '#ccd6eb',
    labels: {
      style: {
        color: '#666666'
      }
    },
    title: {
      style: {
        color: '#274b6d'
      }
    }
  },
  yAxis: {
    gridLineColor: '#e6e6e6',
    lineColor: '#ccd6eb',
    tickColor: '#ccd6eb',
    labels: {
      style: {
        color: '#666666'
      }
    },
    title: {
      style: {
        color: '#274b6d'
      }
    }
  },
  plotOptions: {
    series: {
      dataLabels: {
        color: '#274b6d'
      }
    }
  }
};

// Apply theme globally
Highcharts.setOptions(customTheme);

Responsive Design

System for creating responsive charts that adapt to different screen sizes.

interface ResponsiveOptions {
  /** Responsive rules array */
  rules?: Array<ResponsiveRulesOptions>;
}

interface ResponsiveRulesOptions {
  /** Media query condition */
  condition?: ResponsiveConditionOptions;
  
  /** Chart options to apply when condition matches */
  chartOptions?: Options;
}

interface ResponsiveConditionOptions {
  /** Maximum chart width */
  maxWidth?: number;
  
  /** Minimum chart width */
  minWidth?: number;
  
  /** Maximum chart height */
  maxHeight?: number;
  
  /** Minimum chart height */
  minHeight?: number;
  
  /** Custom callback function */
  callback?: Function;
}

Responsive Example:

const chart = Highcharts.chart('container', {
  title: { text: 'Responsive Chart' },
  
  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          enabled: false
        },
        yAxis: {
          labels: {
            align: 'left',
            x: 0,
            y: -5
          },
          title: {
            text: null
          }
        },
        subtitle: {
          text: null
        },
        credits: {
          enabled: false
        }
      }
    }]
  },
  
  series: [{ data: [1, 2, 3, 4, 5] }]
});

Styling Options

Chart Container Styling

interface ChartOptions {
  /** Chart background color */
  backgroundColor?: ColorType;
  
  /** Chart border settings */
  borderColor?: ColorString;
  borderWidth?: number;
  borderRadius?: number;
  
  /** Chart shadow */
  shadow?: boolean | ShadowOptionsObject;
  
  /** Chart CSS class name */
  className?: string;
  
  /** Chart inline styles */
  style?: CSSObject;
  
  /** Chart spacing */
  spacing?: Array<number>;
  spacingTop?: number;
  spacingRight?: number;
  spacingBottom?: number;
  spacingLeft?: number;
  
  /** Chart margin */
  margin?: Array<number>;
  marginTop?: number;
  marginRight?: number;
  marginBottom?: number;
  marginLeft?: number;
}

Title and Subtitle Styling

interface TitleOptions {
  /** Title text */
  text?: string;
  
  /** Title alignment */
  align?: AlignValue;
  
  /** Title vertical alignment */
  verticalAlign?: VerticalAlignValue;
  
  /** Title position */
  x?: number;
  y?: number;
  
  /** Title margin */
  margin?: number;
  
  /** Title floating */
  floating?: boolean;
  
  /** Title CSS styles */
  style?: CSSObject;
  
  /** Use HTML rendering */
  useHTML?: boolean;
  
  /** Widget anchor */
  widgetAnchor?: string;
}

interface SubtitleOptions {
  /** Subtitle text */
  text?: string;
  
  /** Subtitle alignment */
  align?: AlignValue;
  
  /** Subtitle vertical alignment */
  verticalAlign?: VerticalAlignValue;
  
  /** Subtitle position */
  x?: number;
  y?: number;
  
  /** Subtitle floating */
  floating?: boolean;
  
  /** Subtitle CSS styles */
  style?: CSSObject;
  
  /** Use HTML rendering */
  useHTML?: boolean;
}

Legend Styling

interface LegendOptions {
  /** Legend alignment */
  align?: AlignValue;
  
  /** Legend vertical alignment */
  verticalAlign?: VerticalAlignValue;
  
  /** Legend layout */
  layout?: string;
  
  /** Legend background color */
  backgroundColor?: ColorType;
  
  /** Legend border settings */
  borderColor?: ColorString;
  borderWidth?: number;
  borderRadius?: number;
  
  /** Legend shadow */
  shadow?: boolean | ShadowOptionsObject;
  
  /** Legend item styles */
  itemStyle?: CSSObject;
  itemHoverStyle?: CSSObject;
  itemHiddenStyle?: CSSObject;
  
  /** Legend symbol settings */
  symbolHeight?: number;
  symbolWidth?: number;
  symbolPadding?: number;
  symbolRadius?: number;
  
  /** Legend navigation */
  navigation?: LegendNavigationOptions;
  
  /** Legend title */
  title?: LegendTitleOptions;
}

Data Labels Styling

interface DataLabelsOptions {
  /** Enable data labels */
  enabled?: boolean;
  
  /** Data label alignment */
  align?: AlignValue;
  
  /** Data label vertical alignment */
  verticalAlign?: VerticalAlignValue;
  
  /** Data label position */
  x?: number;
  y?: number;
  
  /** Data label rotation */
  rotation?: number;
  
  /** Data label background color */
  backgroundColor?: ColorType;
  
  /** Data label border settings */
  borderColor?: ColorString;
  borderWidth?: number;
  borderRadius?: number;
  
  /** Data label shadow */
  shadow?: boolean | ShadowOptionsObject;
  
  /** Data label CSS styles */
  style?: CSSObject;
  
  /** Data label padding */
  padding?: number;
  
  /** Use HTML rendering */
  useHTML?: boolean;
  
  /** Data label format string */
  format?: string;
  
  /** Data label formatter function */
  formatter?: DataLabelsFormatterCallbackFunction;
  
  /** Data label overflow handling */
  overflow?: DataLabelsOverflowValue;
  
  /** Data label crop */
  crop?: boolean;
  
  /** Data label inside positioning */
  inside?: boolean;
}

Font and Typography

Font Loading and Configuration

interface FontOptions {
  /** Font family */
  fontFamily?: string;
  
  /** Font size */
  fontSize?: string;
  
  /** Font weight */
  fontWeight?: string;
  
  /** Font style */
  fontStyle?: string;
  
  /** Text color */
  color?: ColorString;
  
  /** Text decoration */
  textDecoration?: string;
  
  /** Text outline */
  textOutline?: string;
  
  /** Text shadow */
  textShadow?: string;
}

// Global font configuration
Highcharts.setOptions({
  chart: {
    style: {
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
    }
  },
  title: {
    style: {
      fontSize: '18px',
      fontWeight: 'bold'
    }
  }
});

Usage Examples:

// Global theme application
Highcharts.setOptions({
  colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9'],
  chart: {
    backgroundColor: '#f8f8f8',
    style: {
      fontFamily: 'Arial, sans-serif'
    }
  },
  title: {
    style: {
      color: '#333333',
      fontSize: '20px'
    }
  }
});

// Individual chart styling
const styledChart = Highcharts.chart('container', {
  chart: {
    backgroundColor: {
      linearGradient: [0, 0, 0, 400],
      stops: [
        [0, 'rgb(255, 255, 255)'],
        [1, 'rgb(240, 240, 255)']
      ]
    },
    borderWidth: 2,
    borderColor: '#cccccc',
    shadow: true
  },
  
  title: {
    text: 'Styled Chart',
    style: {
      color: '#3E576F',
      fontSize: '16px'
    }
  },
  
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: 'white',
          textOutline: '1px contrast'
        }
      }
    }
  },
  
  series: [{
    data: [29.9, 71.5, 106.4],
    color: {
      linearGradient: [0, 0, 0, 300],
      stops: [
        [0, '#7cb5ec'],
        [1, '#1f4d7a']
      ]
    }
  }]
});

// Responsive styling
const responsiveChart = Highcharts.chart('container', {
  responsive: {
    rules: [{
      condition: { maxWidth: 600 },
      chartOptions: {
        chart: { spacingLeft: 20, spacingRight: 20 },
        legend: { layout: 'horizontal', align: 'center' },
        yAxis: { title: { text: null } },
        subtitle: { text: null }
      }
    }, {
      condition: { maxWidth: 400 },
      chartOptions: {
        legend: { enabled: false },
        chart: { spacingLeft: 10, spacingRight: 10 }
      }
    }]
  }
});

// Dynamic color updates
const chart = Highcharts.chart('container', { 
  series: [{ data: [1, 2, 3] }] 
});

// Update series color
chart.series[0].update({
  color: '#ff0000'
});

// Update global colors
chart.update({
  colors: ['#ff0000', '#00ff00', '#0000ff']
});

Formatting Utilities

Utility functions for formatting numbers, dates, and text in charts and data labels.

/**
 * Format a number with specified decimal places and separators
 * @param number - Number to format
 * @param decimals - Number of decimal places
 * @param decimalPoint - Decimal point character (default: '.')
 * @param thousandsSep - Thousands separator character (default: ',')
 * @returns Formatted number string
 */
function numberFormat(
  number: number, 
  decimals: number, 
  decimalPoint?: string, 
  thousandsSep?: string
): string;

/**
 * Format a timestamp as a date string
 * @param format - Date format string (e.g., '%Y-%m-%d')
 * @param timestamp - Unix timestamp in milliseconds
 * @param upperCaseFirst - Whether to capitalize first letter
 * @returns Formatted date string
 */
function dateFormat(format: string, timestamp: number, upperCaseFirst?: boolean): string;

/**
 * Date format patterns for use with dateFormat function
 */
let dateFormats: Record<string, TimeFormatCallbackFunction>;

/**
 * Callback function for formatting date/time portions
 * @param timestamp - Unix timestamp in milliseconds
 * @returns Formatted date/time string
 */
type TimeFormatCallbackFunction = (timestamp: number) => string;

Usage Examples:

import Highcharts from 'highcharts';

// Number formatting in data labels
const chart = Highcharts.chart('container', {
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.y, 2, '.', ',');
        }
      }
    }
  },
  
  tooltip: {
    formatter: function() {
      return `<b>${this.series.name}</b><br/>
              Value: ${Highcharts.numberFormat(this.y, 2, '.', ',')}`;
    }
  },
  
  series: [{ data: [1234.567, 2345.678, 3456.789] }]
});

// Date formatting for time series
const timeChart = Highcharts.chart('container', {
  xAxis: {
    type: 'datetime',
    labels: {
      formatter: function() {
        return Highcharts.dateFormat('%Y-%m-%d', this.value);
      }
    }
  },
  
  tooltip: {
    formatter: function() {
      return `<b>${Highcharts.dateFormat('%A, %b %e, %Y', this.x)}</b><br/>
              ${this.series.name}: ${this.y}`;
    }
  },
  
  series: [{
    data: [
      [Date.UTC(2023, 0, 1), 29.9],
      [Date.UTC(2023, 0, 2), 71.5],
      [Date.UTC(2023, 0, 3), 106.4]
    ]
  }]
});

// Custom number formatting
const value = 1234567.890;
const formatted = Highcharts.numberFormat(value, 2, '.', ' ');
console.log(formatted); // "1 234 567.90"

// Custom date formatting  
const timestamp = Date.now();
const dateString = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', timestamp);
console.log(dateString); // "2023-12-01 15:30:45"