Skip to main content
The Supply Chain Viewer renders an interactive, hierarchical view of a product’s supply chain from Tier 1 to Tier N.

​
Quick start

<script src="https://cdn.heychocolate.com/widgets/v1/supply-chain-viewer.js"></script>

<hc-supply-chain-viewer
  product-id="prod_abc123"
  api-key="sk_live_your_key"
></hc-supply-chain-viewer>

​
Attributes

AttributeTypeRequiredDescription
product-idStringYesProduct identifier
api-keyStringYesAPI key
max-tierNumberNoMaximum tier depth to display (default: all)
themeStringNolight, dark, auto
layoutStringNotree, graph, map (default: tree)
show-impactBooleanNoShow CO2 contribution per node (default: true)
show-transportBooleanNoShow transport methods on edges (default: true)
interactiveBooleanNoEnable click/hover interactions (default: true)
heightStringNoComponent height (default: 500px)

​
Layout modes

​
Tree

Hierarchical tree layout showing parent-child relationships: 
<hc-supply-chain-viewer product-id="prod_abc123" layout="tree"></hc-supply-chain-viewer>

​
Graph

Network graph with force-directed positioning: 
<hc-supply-chain-viewer product-id="prod_abc123" layout="graph"></hc-supply-chain-viewer>

​
Map

Geographic map view showing supplier locations: 
<hc-supply-chain-viewer product-id="prod_abc123" layout="map"></hc-supply-chain-viewer>

​
Events

const viewer = document.querySelector('hc-supply-chain-viewer');

viewer.addEventListener('hc:supplier-selected', (e) => {
  console.log('Supplier:', e.detail.supplier.name);
  console.log('CO2 contribution:', e.detail.supplier.co2Contribution);
});

viewer.addEventListener('hc:tier-expanded', (e) => {
  console.log('Expanded tier:', e.detail.tier);
});

​
Styling

hc-supply-chain-viewer {
  --hc-sc-bg: #ffffff;
  --hc-sc-node-bg: #f5f5f5;
  --hc-sc-node-border: #e0e0e0;
  --hc-sc-edge-color: #bdbdbd;
  --hc-sc-highlight: #F83B00;
  --hc-sc-font: inherit;
}