Bar Chart Corner Radius Calculator

A utility for calculating border radius values for bar chart elements that adapts based on chart orientation, stacking, and bar dimensions.

Requirements

Implement a function that calculates border radius for bars in a chart. The radius should be applied only to the "end" corners of bars:

• Vertical bars: top-left and top-right corners
• Horizontal bars: top-right and bottom-right corners

For stacked bars, only bars at the stack end (topmost or rightmost segment) should have rounded corners.

The radius value should be calculated proportionally to the bar width to maintain visual balance. Bar width depends on:

• Chart dimensions (width and height)
• Number of data points
• Number of series
• Whether bars are stacked

Default chart dimensions should be assumed as 500 pixels if not provided.

Implementation

@generates

API

export interface BarStyleConfig {
  orientation?: 'horizontal' | 'vertical';
  stacking?: 'normal' | 'percent' | null;
  dataPointCount: number;
  seriesCount: number;
  chartWidth?: number;
  chartHeight?: number;
}

export interface StackEndInfo {
  isStackEnd: boolean;
  isPositive: boolean;
}

/**
 * Calculates the appropriate border radius for bar chart elements.
 *
 * @param config - Configuration object containing chart properties
 * @param stackInfo - Optional information about stack positioning
 * @returns Array of four radius values [topLeft, topRight, bottomRight, bottomLeft]
 */
export function calculateBarRadius(
  config: BarStyleConfig,
  stackInfo?: StackEndInfo
): [number, number, number, number];

Test Cases

• Given a vertical bar chart with 5 data points, 1 series, and default dimensions, returns radius values with top corners rounded and bottom corners square [radius, radius, 0, 0] where radius > 0 @test
• Given a horizontal bar chart with 10 data points, 2 series, returns radius values with right corners rounded and left corners square [0, radius, radius, 0] where radius > 0 @test
• Given a stacked vertical bar chart, when isStackEnd is true, returns rounded top corners; when false, returns no rounding [0, 0, 0, 0] @test
• Given a chart with 100 data points and narrow bars, returns proportionally smaller radius values compared to a chart with 5 data points @test

Dependencies { .dependencies }

@lightdash/common { .dependency }

Provides chart configuration types and utilities for Business Intelligence visualizations.

@satisfied-by