{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-chart",
  "description": "Chart component for data visualization",
  "docUrl": "https://design.soracom.io/design-system/elements/chart/",
  "category": "elements",
  "htmlElements": [
    "div",
    "svg"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": {
      "support": "custom",
      "values": [
        "--scaled"
      ]
    },
    "utility": {
      "support": "custom",
      "values": [
        "--clip",
        "--3",
        "--4",
        "--5",
        "--6",
        "--7",
        "--8",
        "--9",
        "--10",
        "--11",
        "--12",
        "--13",
        "--14",
        "--15",
        "--16"
      ]
    }
  },
  "cssCustomProperties": [
    {
      "name": "--ds-chart-indent",
      "default": "0px",
      "description": "Base inset between the chart canvas and its container"
    }
  ],
  "structure": {
    "parts": {
      "canvas": {
        "element": "canvas",
        "optional": true
      },
      "svgContent": {
        "element": "svg",
        "optional": true
      }
    },
    "patterns": {
      "canvas": "<div class=\"ds-chart\"><canvas></canvas></div>",
      "svg": "<svg class=\"ds-chart\" role=\"img\" aria-label=\"{description}\">{content}</svg>"
    }
  },
  "attributes": {},
  "dataAttributes": [],
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-chart\"><canvas></canvas></div>"
    },
    {
      "name": "scaled",
      "html": "<div class=\"ds-chart --scaled\"><canvas></canvas></div>"
    },
    {
      "name": "clipped",
      "html": "<div class=\"ds-chart --clip --9\"><canvas></canvas></div>"
    }
  ]
}