How to code this chart in the product description

Topic summary

A user is seeking guidance on implementing a segment chart within a collapsible section on a product page. They’ve shared a screenshot reference (PNG image, 496x144 pixels) showing the desired chart design with data that can be looked up in metafields.

Suggested approach:

  • For dynamic charts: Use JavaScript
  • For static designs: CSS alone should be sufficient

The discussion remains open with no detailed implementation steps provided yet.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.

Anyone knows or had coded a segment chart like this in the product page’s collapsible session? The data can look up the metafields. Thanks.

If it’s dynamic you can use js otherwise css would be enough to design it.