circular-charts

Circular Charts & Chart Helpers

These instructions apply to circular chart components (donut, pie, polar, radial-bar) and their shared helper utilities.

packages/openbridge-webcomponents/src/bars-graphs/**

When working with circular chart components in this directory:

1. Unified Chart Architecture:

   • Circular charts are built on Chart.js and share common helpers from charthelpers/
   • Prefer abstracting common logic to shared helpers rather than duplicating across chart components
   • Consider checking if similar functionality exists in shared helpers or existing chart components before implementing new features
   • Typical markup structure:

     <div class="wrapper">
       <canvas></canvas>
     </div>
     

2. Canvas Sizing for Circular Charts:

   • Standard chart dimensions: CHART_WIDTH = 256px, CANVAS_PADDING = 32px (resulting in 320x320px full canvas size)
   • Charts are responsive (responsive: true) and maintain aspect ratio (maintainAspectRatio: true)
   • Canvas width is typically 100% of its container, with height computed based on aspect ratio
   • Consider updating or redrawing the chart when size changes (programmatic or resize-based)
   • Canvas aspect ratio is typically 1:1 (square), but may be adjusted when labels require more horizontal space
   • When labels need extra space, additional padding is typically added to both left and right sides

3. Outer Labels (Optional Feature):

   • When implemented, outer labels are typically positioned outside the main chart circle
   • Consider using custom plugins from charthelpers/ for consistent label positioning across chart types
   • Label dimensions often relate to chart data, options, aspect ratio, and padding
   • If labels fit within the standard padding area, aspect ratio adjustment may not be needed
   • When adding outer label support to a new chart type, consider extending existing shared plugins