tessl/npm-highcharts

JavaScript charting framework for creating interactive, responsive, and visually appealing charts

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Styling and Theming

Name: tessl/npm-highcharts
Author: tessl

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"