Skip to main content
Graph is the component that renders the chart visualization. It must be used inside a GraphProvider.

​
Basic usage

import { GraphProvider, Graph } from '@graphysdk/core';

<GraphProvider config={config}>
  <Graph />
</GraphProvider>

​
Props

All props are optional.
​
sizing
GraphSizing
Controls how the graph responds to its container size.
  • mode: 'fixed' - graph has a fixed width and height (default)
  • mode: 'responsive' - graph automatically resizes to fit its parent container
  • mode: 'keepAspectRatio' - graph scales to fit container while maintaining aspect ratio (requires either intrinsic dimensions or aspect ratio)
// Fixed sizing: specific dimensions
<Graph sizing={{ mode: 'fixed', width: 800, height: 600 }} />

// Responsive sizing: fills container
<Graph sizing={{ mode: 'responsive' }} />

// Keep aspect ratio: with intrinsic dimensions
<Graph sizing={{ mode: 'keepAspectRatio', intrinsicWidth: 800, intrinsicHeight: 600 }} />

// Keep aspect ratio: with intrinsic width and aspect ratio
<Graph sizing={{ mode: 'keepAspectRatio', intrinsicWidth: 800, aspectRatio: 1.5 }} />

// Keep aspect ratio: with intrinsic height and aspect ratio
<Graph sizing={{ mode: 'keepAspectRatio', intrinsicHeight: 600, aspectRatio: 1.5 }} />
​
isEditable
boolean
default:"true"
Controls whether the graph is editable. Set to false for readonly graphs.
// Editable graph
<Graph isEditable={true} />

// Readonly graph (default)
<Graph isEditable={false} />
​
isInteractive
boolean
default:"true"
Controls whether hover and click interactions are enabled (tooltips, highlighting, etc.).Set to false for static charts that don’t respond to user interactions.
// Interactive chart (default)
<Graph isInteractive={true} />

// Static chart
<Graph isInteractive={false} />
​
hasBorder
boolean
default:"true"
Controls whether the border is displayed.
// Without border
<Graph hasBorder={false} />
​
isExport
boolean
Indicates the chart is being rendered for export. This may adjust certain rendering behaviors for better export quality.
// Rendering for export
<Graph isExport={true} />
​
onResize
function
Callback invoked when the chart container is resized.Signature: (entries: ResizeObserverEntry[]) => void
<Graph 
  onResize={(entries) => {
    console.log('Chart resized:', entries[0].contentRect);
  }} 
/>
​
footerContent
React.ReactNode
Custom content to display in the chart footer area. Replaces the default footer.
<Graph 
  footerContent={
    <div>Custom footer content</div>
  } 
/>
​
renderTitle
function
Custom render function for the chart title area.Signature: (props: { isEditable: boolean, titleDocument: JSONContent, onChange: (newTitle: JSONContent) => void }) => React.ReactNode
<Graph 
  renderTitle={({ titleDocument, onChange }) => (
    <CustomTitleEditor 
      value={titleDocument} 
      onChange={onChange} 
    />
  )} 
/>
​
appearanceVariant
'default' | 'minimal'
Visual appearance variant for the chart layout.

​
Complete example

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

const config: GraphConfig = {
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'revenue', label: 'Revenue' }
    ],
    rows: [
      { month: 'Jan', revenue: 12000 },
      { month: 'Feb', revenue: 15000 },
      { month: 'Mar', revenue: 18000 }
    ]
  },
  type: 'column'
};

function MyChart() {
  return (
    <GraphProvider config={config}>
      <Graph 
        sizing={{ mode: 'responsive' }}
        isEditable={true}
        isInteractive={true}
        hasBorder={true}
        onResize={(entries) => {
          console.log('Resized to:', entries[0].contentRect);
        }}
      />
    </GraphProvider>
  );
}

​
Type definitions

interface GraphProps {
  sizing?: GraphSizing;
  isEditable?: boolean;
  isInteractive?: boolean;
  zoom?: number;
  hasBorder?: boolean;
  isExport?: boolean;
  onResize?: ResizeObserverOnResize;
  footerContent?: React.ReactNode;
  renderTitle?: (props: GraphTitleRenderProps) => React.ReactNode;
  appearanceVariant?: VisualisationLayoutAppearanceVariant;
}

type GraphSizing = 
  | { mode: 'responsive' }
  | { mode: 'fixed'; width: number; height: number }
  | { mode: 'keepAspectRatio'; intrinsicWidth: number; intrinsicHeight: number }
  | { mode: 'keepAspectRatio'; intrinsicWidth: number; aspectRatio: number }
  | { mode: 'keepAspectRatio'; intrinsicHeight: number; aspectRatio: number };