Documentation Index
Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
Use this file to discover all available pages before exploring further.
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
| Attribute | Type | Required | Description |
|---|
product-id | String | Yes | Product identifier |
api-key | String | Yes | API key |
max-tier | Number | No | Maximum tier depth to display (default: all) |
theme | String | No | light, dark, auto |
layout | String | No | tree, graph, map (default: tree) |
show-impact | Boolean | No | Show CO2 contribution per node (default: true) |
show-transport | Boolean | No | Show transport methods on edges (default: true) |
interactive | Boolean | No | Enable click/hover interactions (default: true) |
height | String | No | Component 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;
}
