Graph borders

The border properties in appearance.border allow you to customize the style, width and color of borders around your graphs. You can create subtle strokes, bold frames, gradient effects or completely custom border styles.

Quick start

Borders are controlled by three properties that work together:

import type { GraphConfig } from '@graphysdk/core';

const config: GraphConfig = {
  appearance: {
    border: {
      width: 12, // Width in pixels
      style: 'gradient', // Visual style
      color: '#6366f1', // Color or preset name
    },
  },
};

Border width

Control the thickness of your border using width. Set to 0 to remove the border completely.

appearance: {
  border: {
    width: 0; // No border
  }
}

appearance: {
  border: {
    width: 12; // 12px border
  }
}

appearance: {
  border: {
    width: 1; // 1px thin border
  }
}

appearance.border.width

number

default:"0"

Border width in pixels (0-64). Set to 0 for no border.

Border styles

Use style to control how your border appears. Each style treats color differently, helping frame your data without stealing the spotlight:

appearance.border.style

default:"none"

Border style: - 'none' - No border - 'custom' - Apply the custom hex color from color as-is - 'tinted' - Tint the color based on the color scheme (darkens in dark mode, lightens in light mode) - 'gradient' - Generate a gradient starting from color, adjusted based on the color scheme - 'preset' - Use a predefined border style - 'grey' - Legacy grey border style

Tinted

A color border that’s subtly tinted based on your chosen color and the graph’s theme:

appearance: {
  border: {
    width: 12,
    style: 'tinted',
    color: '#3b82f6'  // Automatically tinted for contrast
  }
}

Gradient

Automatically generates a linear gradient based on your chosen color and the graph’s theme:

appearance: {
  border: {
    width: 12,
    style: 'gradient',
    color: '#8b5cf6'  // Creates theme-adjusted gradient
  }
}

Grey

A neutral border that adapts to light and dark themes. Perfect for subtle definition without drawing attention:

appearance: {
  border: {
    width: 1,
    style: 'grey'
    // color not required
  }
}

Preset

Use one of twelve predefined gradient styles. Set color to one of these preset names:

appearance: {
  border: {
    width: 12,
    style: 'preset',
    color: 'sunset'  // or any preset name below
  }
}

Available presets:

'lilac' - Soft purple to pink
'neon_pink' - Vibrant pink gradient
'blackberry' - Purple to light blue
'sun' - Yellow to orange
'iceland' - Teal gradient
'sunset' - Yellow to pink
'ultraviolet' - Purple gradient
'purple' - Rich purple tones
'ice_cream' - Pink to peach
'mint' - Green to cyan
'cool' - Blue to cyan
'fresh' - Purple to cyan

Custom

Use your exact color with no adjustments. Unlike tinted and gradient, custom applies your color as-is with no theme-based tinting:

appearance: {
  border: {
    width: 12,
    style: 'custom',
    color: '#ff6b6b'  // Exact color used as-is
  }
}

Border colors

appearance.border.color

string

The color to use for the border. Accepts: - Hex colors: "#3b82f6", "#ff6b6b" - Preset names (when style: 'preset'): "lilac", "sunset", "ultraviolet", etc. - Series references: "series1", "series2" (uses color from series styles) The color may be adjusted based on theme and style for optimal visual appearance.

Hex colors

Standard hex color values work with tinted, gradient and custom styles:

appearance: {
  border: {
    style: 'tinted',
    color: '#3b82f6'
  }
}

Preset names

When using style: 'preset', reference one of the predefined gradients:

appearance: {
  border: {
    style: 'preset',
    color: 'sunset'
  }
}

Series references

Match your border to a series color by referencing the series key:

const config: GraphConfig = {
  appearance: {
    border: {
      width: 12,
      style: 'tinted',
      color: 'series1',
    },
    seriesStyles: {
      series1: { customColor: '#10b981' },
    },
  },
};

Rounded corners

appearance.hasRoundedCorners

boolean

default:"true"

Whether to round the corners of the border. Ignored if border.width is 0.

appearance: {
  border: {
    width: 12,
    style: 'gradient',
    color: '#6366f1'
  },
  hasRoundedCorners: true  // Rounded corners
}

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

Quick start

Border width

Border styles

Tinted

Gradient

Grey

Preset

Custom

Border colors

Hex colors

Preset names

Series references

Rounded corners

​Quick start

​Border width

​Border styles

​Tinted

​Gradient

​Grey

​Preset

​Custom

​Border colors

​Hex colors

​Preset names

​Series references

​Rounded corners

Quick start

Border width

Border styles

Tinted

Gradient

Grey

Preset

Custom

Border colors

Hex colors

Preset names

Series references

Rounded corners