Skip to main content
The GraphTypeIcon component renders SVG icons representing different graph types.

​
Basic usage

import { GraphTypeIcon } from "@graphysdk/editor";

<GraphTypeIcon type="column" />

​
Props

PropDescription
typeThe graph type to display (required)
classNameOptional CSS class name for styling

​
Supported icons

The component supports all graph types:
  • column – Column graph
  • columnStacked – Stacked column graph
  • columnStackedFill – 100% stacked column graph
  • bar – Bar graph
  • barStacked – Stacked bar graph
  • barStackedFill – 100% stacked bar graph
  • line – Line graph
  • areaStacked – Stacked area graph
  • combo – Combo graph
  • pie – Pie graph
  • donut – Donut graph
  • funnel – Funnel
  • heatmap – Heatmap
  • table – Table
  • scatter – Scatter plot
  • bubble – Bubble plot
  • mekko – Mekko
  • waterfall – Waterfall

​
Styling

Icons inherit the currentColor for their fill, making them easy to theme. You can also pass a className for custom styling: 
<div style={{ color: "#16A34A", width: 40 }}>
  <GraphTypeIcon type="line" className="custom-icon" />
</div>