{
  "element": "nve-sparkline",
  "entrypoint": "@nvidia-elements/core/sparkline/sparkline.examples.json",
  "items": [
    {
      "id": "sparkline",
      "name": "Default",
      "template": "<nve-sparkline id=\"default\"></nve-sparkline>\n<script type=\"module\">\n  const sparkline = document.querySelector(\"nve-sparkline#default\");\n  sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];\n</script>\n",
      "summary": "Basic sparkline from numeric array values. Use as a compact trend indicator.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-marks",
      "name": "Marks",
      "template": "<div nve-layout=\"row gap:md\">\n  <nve-sparkline data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n  <nve-sparkline mark=\"area\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n  <nve-sparkline mark=\"gradient\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n  <nve-sparkline mark=\"column\" data=\"[6, 10, 8, 16, 13, 18, 15]\"></nve-sparkline>\n  <nve-sparkline mark=\"winloss\" data=\"[5, -3, 2, -1, 4, 0, 3]\"></nve-sparkline>\n</div>\n",
      "summary": "Mark variants include line, area, gradient, column, and winloss to support trend and outcome signals.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-status",
      "name": "Status",
      "template": "<div nve-layout=\"row gap:md\">\n  <nve-sparkline status=\"accent\" mark=\"area\" data=\"[3, 2, 10, 8, 4, 6, 9]\"></nve-sparkline>\n  <nve-sparkline status=\"danger\" mark=\"area\" data=\"[15, 14, 12, 9, 8, 7, 5]\"></nve-sparkline>\n  <nve-sparkline status=\"warning\" mark=\"area\" data=\"[8, 9, 7, 10, 9, 8, 9]\"></nve-sparkline>\n  <nve-sparkline status=\"success\" mark=\"area\" data=\"[5, 7, 8, 9, 12, 14, 15]\"></nve-sparkline>\n</div>\n",
      "summary": "Semantic statuses apply task, support, and trend color mappings.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-inline-with-text",
      "name": "InlineWithText",
      "template": "<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body loose\">\n    This week's lane keeping safety score trend\n    <nve-sparkline\n      mark=\"area\"\n      status=\"success\"\n      data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n      aria-label=\"lane keeping safety score trend\"\n    ></nve-sparkline>\n    shows a steady rise after an early dip, with decreasing interventions per shift:\n    <nve-sparkline\n      mark=\"column\"\n      status=\"accent\"\n      data=\"[16, 14, 15, 13, 12, 11, 10]\"\n      aria-label=\"lane keeping interventions per shift\"\n    ></nve-sparkline\n    >, and predominantly successful route outcomes:\n    <nve-sparkline\n      mark=\"winloss\"\n      status=\"success\"\n      data=\"[1, 1, -1, 1, 0, 1, 1]\"\n      aria-label=\"lane keeping route outcomes\"\n    ></nve-sparkline\n    >.\n  </p>\n</div>\n",
      "summary": "Sparklines inherit font size and flow inline with surrounding text and metrics.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-data-grid",
      "name": "DataGrid",
      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>Autonomy Service</nve-grid-column>\n    <nve-grid-column>Safety Score</nve-grid-column>\n    <nve-grid-column>Interventions / Shift</nve-grid-column>\n    <nve-grid-column>Route Outcome</nve-grid-column>\n  </nve-grid-header>\n  <nve-grid-row>\n    <nve-grid-cell>Lane Keeping</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Lane Keeping 30 day safety score trend\"\n        mark=\"area\"\n        status=\"success\"\n        min=\"0\"\n        max=\"100\"\n        data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Lane Keeping interventions per shift\"\n        mark=\"column\"\n        status=\"success\"\n        min=\"0\"\n        max=\"50\"\n        data=\"[12, 11, 12, 10, 9, 8, 7, 6]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Lane Keeping route outcomes\"\n        mark=\"winloss\"\n        data=\"[1, 1, 1, 0, 1, 0, 1, 1]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>Object Detection</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Object Detection 30 day safety score trend\"\n        mark=\"area\"\n        status=\"warning\"\n        min=\"0\"\n        max=\"100\"\n        data=\"[76, 88, 72, 79, 85, 70, 83, 74]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Object Detection interventions per shift\"\n        mark=\"column\"\n        status=\"warning\"\n        min=\"0\"\n        max=\"50\"\n        data=\"[18, 20, 17, 19, 20, 21, 19, 22]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Object Detection route outcomes\"\n        mark=\"winloss\"\n        data=\"[1, 0, -1, 1, 0, -1, 0, 1]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>Path Planning</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Path Planning 30 day safety score trend\"\n        mark=\"area\"\n        status=\"danger\"\n        min=\"0\"\n        max=\"100\"\n        data=\"[58, 54, 49, 45, 40, 36, 31, 27]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Path Planning interventions per shift\"\n        mark=\"column\"\n        status=\"danger\"\n        min=\"0\"\n        max=\"50\"\n        data=\"[24, 26, 29, 31, 34, 36, 39, 42]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Path Planning route outcomes\"\n        mark=\"winloss\"\n        data=\"[1, -1, 0, -1, -1, -1, 0, -1]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
      "summary": "Embed sparklines in grid cells to add compact trend context to tabular data.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-explicit-size",
      "name": "ExplicitSize",
      "template": "<div id=\"sparkline-sizes\" nve-layout=\"row gap:md\">\n  <nve-sparkline size=\"xs\"></nve-sparkline>\n  <nve-sparkline size=\"sm\"></nve-sparkline>\n  <nve-sparkline size=\"md\"></nve-sparkline>\n  <nve-sparkline size=\"lg\"></nve-sparkline>\n  <nve-sparkline size=\"xl\"></nve-sparkline>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#sparkline-sizes > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n  }\n</script>\n",
      "summary": "Explicit size tokens set fixed sparkline height independent of text context.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-default-size",
      "name": "DefaultSize",
      "template": "<div id=\"inline-sparkline-sizes\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:sm\" nve-text=\"heading\">\n    <span>heading</span>\n    <nve-sparkline></nve-sparkline>\n  </div>\n  <div nve-layout=\"row gap:sm\" nve-text=\"body\">\n    <span>body</span>\n    <nve-sparkline></nve-sparkline>\n  </div>\n  <div nve-layout=\"row gap:sm\" nve-text=\"label sm\">\n    <span>label sm</span>\n    <nve-sparkline></nve-sparkline>\n  </div>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#inline-sparkline-sizes > div[nve-text] > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n  }\n</script>\n",
      "summary": "Without a size attribute, height scales with the parent text size for typographic alignment.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-interpolation",
      "name": "Interpolation",
      "template": "<div id=\"sparkline-interpolations\" nve-layout=\"row gap:md\">\n  <nve-sparkline mark=\"area\" interpolation=\"linear\"></nve-sparkline>\n  <nve-sparkline mark=\"area\" interpolation=\"smooth\"></nve-sparkline>\n  <nve-sparkline mark=\"area\" interpolation=\"step\"></nve-sparkline>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#sparkline-interpolations > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [6, 10, 8, 16, 13, 18, 15];\n  }\n</script>\n",
      "summary": "Interpolation controls linear, smooth, or step transitions between points.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-symbols",
      "name": "Symbols",
      "template": "<div id=\"sparkline-symbols\" nve-layout=\"row gap:md\">\n  <nve-sparkline denote-last></nve-sparkline>\n  <nve-sparkline denote-first denote-last></nve-sparkline>\n  <nve-sparkline denote-min denote-max></nve-sparkline>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#sparkline-symbols > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [12, 8, 15, 10, 18, 14, 11];\n  }\n</script>\n",
      "summary": "Symbols denote specific data points in line, area, and gradient marks.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-fixed-data-domain",
      "name": "FixedDataDomain",
      "template": "<div nve-layout=\"column gap:md align:left\" nve-text=\"body lg\">\n  <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[80, 85, 90, 95, 100]\"></nve-sparkline>\n  <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[40, 45, 50, 55, 60]\"></nve-sparkline>\n  <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[0, 5, 10, 15, 20]\"></nve-sparkline>\n</div>\n",
      "summary": "Fixed min and max values define a shared vertical domain to ensure comparability across adjacent sparklines.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-zero-line",
      "name": "ZeroLine",
      "template": "<div nve-layout=\"row gap:md\">\n  <nve-sparkline aria-label=\"mixed values\" mark=\"area\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n  <nve-sparkline aria-label=\"mostly negative values\" mark=\"gradient\" data=\"[-8, -5, -2, 1, -3, -6, -4]\"></nve-sparkline>\n  <nve-sparkline aria-label=\"mixed values column\" mark=\"column\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n</div>\n",
      "summary": "The chart renders a zero baseline when the data includes both positive and negative values.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-interval-length",
      "name": "IntervalLength",
      "template": "<div id=\"sparkline-intervals\" nve-layout=\"row gap:md\">\n  <nve-sparkline interval-length=\"0.3\"></nve-sparkline>\n  <nve-sparkline interval-length=\"0.6\"></nve-sparkline>\n  <nve-sparkline interval-length=\"2.0\"></nve-sparkline>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#sparkline-intervals > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [10, 20, 15, 25, 18];\n  }\n</script>\n",
      "summary": "Interval length adjusts spacing between points for line marks, from compact to spacious.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "sparkline-custom-styling",
      "name": "CustomStyling",
      "template": "<nve-sparkline\n  aria-label=\"custom sparkline\"\n  mark=\"gradient\"\n  interpolation=\"smooth\"\n  data=\"[8, 14, 9, 17, 13, 21, 16]\"\n  denote-last\n  style=\"\n    --height: 120px;\n    --accent-color: var(--nve-sys-layer-canvas-background);\n    --accent-radius: 5px;\n    --accent-border-width: 3px;\n    --line-width: 2.5px;\n    --line-color: var(--nve-ref-color-blue-cobalt-1100);\n    --gradient-max-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100) 45%, transparent);\n    --gradient-min-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100), transparent 90%);\n  \"\n></nve-sparkline>\n",
      "summary": "CSS custom properties are available to adjust dimensions and visual styling.",
      "description": "",
      "composition": false,
      "tags": [
        "theme"
      ]
    }
  ]
}