{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart",
  "type": "registry:ui",
  "title": "Chart (MIAN)",
  "description": "Bar, horizontal bar, line/area and donut charts from plain markup. Each noodle draws them in its own style.",
  "categories": [
    "data display",
    "chart",
    "graph",
    "bar chart",
    "line chart"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/chart.css",
      "type": "registry:file",
      "target": "mian/components/chart.css",
      "content": ".mn-chart { margin: 0; display: grid; gap: .75rem; min-width: 0; font: 400 .75rem/1.3 var(--mn-font); color: var(--mn-muted); }\n.mn-chart figcaption { font-size: .75rem; color: var(--mn-muted); }\n.mn-chart-bars {\n  --h: 10rem; --max: 100;\n  display: flex; align-items: stretch; gap: var(--mn-bar-gap, 6px);\n  height: var(--h); padding-bottom: 1.25rem; position: relative;\n  background: repeating-linear-gradient(to top, var(--mn-border) 0 1px, transparent 1px calc((var(--h) - 1.25rem) / 4));\n  background-size: 100% calc(100% - 1.25rem); background-repeat: no-repeat;\n}\n.mn-bar { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }\n.mn-bar::before {\n  content: \"\"; display: block;\n  height: calc(var(--v, 0) / var(--max) * 100%);\n  border-radius: var(--mn-bar-radius, min(6px, var(--mn-radius-field))) var(--mn-bar-radius, min(6px, var(--mn-radius-field))) 0 0;\n  background: var(--mn-bar-fill, color-mix(in oklab, var(--mn-series-1) 30%, transparent));\n  transition: height 500ms var(--mn-spring), background-color var(--mn-duration) var(--mn-ease);\n}\n.mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-bar-fill-hl, var(--mn-series-1)); }\n.mn-bar > span { position: absolute; left: 50%; bottom: -1.25rem; translate: -50% 0; white-space: nowrap; font-size: .6875rem; }\n.mn-bar[data-value]::after {\n  content: attr(data-value); position: absolute; left: 50%; bottom: calc(var(--v, 0) / var(--max) * (100%) + 4px); translate: -50% 0;\n  padding: 2px 6px; border-radius: 4px; background: var(--mn-fg); color: var(--mn-bg); font-size: .6875rem; font-weight: 600;\n  opacity: 0; pointer-events: none; transition: opacity var(--mn-duration) var(--mn-ease);\n}\n.mn-bar:hover::after, .mn-bar.mn-active::after { opacity: 1; z-index: 2; }\n.mn-bar.mn-active::before { background: var(--mn-bar-fill-hl, var(--mn-series-1)); }\n/* The hovered column is marked like the line chart's guide. */\n.mn-chart-bars:not(.mn-chart-h) .mn-bar:is(:hover, .mn-active) { background: linear-gradient(color-mix(in oklab, var(--mn-fg) 6%, transparent), color-mix(in oklab, var(--mn-fg) 6%, transparent)) top / 100% calc(100% - 0px) no-repeat; border-radius: var(--mn-radius-field) var(--mn-radius-field) 0 0; }\n/* Horizontal bars */\n.mn-chart-bars.mn-chart-h { flex-direction: column; height: auto; padding: 0 2.5rem 0 var(--mn-chart-label, 4.5rem); gap: var(--mn-bar-gap, 8px); background: none; }\n.mn-chart-h .mn-bar { flex: none; flex-direction: row; justify-content: flex-start; align-items: center; height: 1.1rem; }\n.mn-chart-h .mn-bar::before { height: 100%; width: calc(var(--v, 0) / var(--max) * 100%); border-radius: 0 var(--mn-bar-radius, 4px) var(--mn-bar-radius, 4px) 0; transition: width 500ms var(--mn-spring); }\n.mn-chart-h .mn-bar > span { left: calc(var(--mn-chart-label, 4.5rem) * -1); bottom: auto; top: 50%; translate: 0 -50%; width: calc(var(--mn-chart-label, 4.5rem) - .5rem); text-align: end; overflow: hidden; text-overflow: ellipsis; }\n.mn-chart-h .mn-bar[data-value]::after { left: calc(var(--v, 0) / var(--max) * 100% + 6px); bottom: auto; top: 50%; translate: 0 -50%; opacity: 1; background: none; color: var(--mn-muted); padding: 0; }\n\n/* Line / area: mian.js draws the paths from data-values */\n.mn-chart-line { display: block; width: 100%; height: var(--h, 10rem); overflow: visible; }\n.mn-chart-line .mn-grid-line { stroke: var(--mn-border); stroke-width: 1; vector-effect: non-scaling-stroke; }\n.mn-chart-line .mn-line { fill: none; stroke: var(--mn-series-1); stroke-width: var(--mn-line-width, 2px); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }\n.mn-chart-line .mn-line.mn-s2 { stroke: var(--mn-series-2); }\n.mn-chart-line .mn-area { fill: var(--mn-series-1); opacity: var(--mn-area-opacity, .12); }\n.mn-chart-line .mn-area.mn-s2 { fill: var(--mn-series-2); }\n.mn-chart-line .mn-point { fill: var(--mn-surface); stroke: var(--mn-series-1); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: var(--mn-point-opacity, 0); }\n.mn-chart-line .mn-point.mn-s2 { stroke: var(--mn-series-2); }\n.mn-chart-line { cursor: crosshair; touch-action: pan-y; }\n.mn-chart-line:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 4px; border-radius: 2px; }\n.mn-chart-line .mn-chart-guide { stroke: var(--mn-chart-guide, color-mix(in oklab, var(--mn-fg) 45%, transparent)); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }\n.mn-chart-line .mn-point.mn-active { r: 4.5; }\n/* The hover tip: label, then one row per series with its colour. */\n.mn-chart-tip {\n  position: absolute; z-index: 5; pointer-events: none; display: grid; gap: .2rem; min-width: 6rem; max-width: 16rem;\n  padding: .45rem .6rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-field);\n  background: var(--mn-surface); color: var(--mn-fg); box-shadow: var(--mn-shadow-md);\n  font: 400 .75rem/1.35 var(--mn-font); font-variant-numeric: tabular-nums; white-space: nowrap;\n}\n.mn-chart-tip[hidden] { display: none; }\n.mn-chart-tip strong { font-weight: 600; color: var(--mn-fg); }\n.mn-chart-tip-row { display: flex; align-items: center; gap: .4rem; color: var(--mn-muted); }\n.mn-chart-tip-row b { margin-inline-start: auto; padding-inline-start: .75rem; color: var(--mn-fg); font-weight: 600; }\n.mn-chart-tip-row i { width: .55rem; height: .55rem; flex: none; border-radius: 2px; background: var(--mn-series-1); }\n.mn-chart-tip-row i.mn-s2 { background: var(--mn-series-2); }\n.mn-chart-bars[tabindex]:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 4px; border-radius: 2px; }\n.mn-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: 0; list-style: none; }\n.mn-legend li { display: inline-flex; align-items: center; gap: .4rem; }\n.mn-legend li::before { content: \"\"; width: .7rem; height: .7rem; border-radius: 3px; background: var(--_s, var(--mn-series-1)); }\n.mn-legend li:nth-child(2) { --_s: var(--mn-series-2); } .mn-legend li:nth-child(3) { --_s: var(--mn-series-3); } .mn-legend li:nth-child(4) { --_s: var(--mn-series-4); }\n\n/* Donut: segments are percentages in --s1…--s4 */\n.mn-donut {\n  --s1: 0; --s2: 0; --s3: 0; --s4: 0; --size: 8rem; --thick: 40%;\n  position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;\n  background: conic-gradient(from var(--mn-donut-start, 0deg),\n    var(--mn-series-1) 0 calc(var(--s1) * 1%),\n    var(--mn-series-2) 0 calc((var(--s1) + var(--s2)) * 1%),\n    var(--mn-series-3) 0 calc((var(--s1) + var(--s2) + var(--s3)) * 1%),\n    var(--mn-series-4) 0 calc((var(--s1) + var(--s2) + var(--s3) + var(--s4)) * 1%),\n    var(--mn-surface-2) 0);\n  /* --thick is the ring width as a share of the radius (or a length). */\n  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));\n          mask: radial-gradient(closest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));\n}\n.mn-donut-wrap { position: relative; display: inline-grid; place-items: center; }\n.mn-donut-wrap > .mn-donut-label { position: absolute; text-align: center; font: 700 1.25rem/1.1 var(--mn-font); color: var(--mn-fg); }\n.mn-donut-wrap > .mn-donut-label small { display: block; font-size: .6875rem; font-weight: 500; color: var(--mn-muted); }"
    },
    {
      "path": "mian/examples/chart.html",
      "type": "registry:file",
      "target": "mian/examples/chart.html",
      "content": "<!-- Bars -->\n<figure class=\"mn-chart\" role=\"img\" aria-label=\"Revenue by month, peaking in December at 94\">\n  <div class=\"mn-chart-bars\" style=\"--max:100\">\n    <div class=\"mn-bar\" style=\"--v:38\" data-value=\"38\"><span>Jan</span></div>\n    <div class=\"mn-bar\" style=\"--v:52\" data-value=\"52\"><span>Feb</span></div>\n    <div class=\"mn-bar\" style=\"--v:44\" data-value=\"44\"><span>Mar</span></div>\n    <div class=\"mn-bar\" style=\"--v:66\" data-value=\"66\"><span>Apr</span></div>\n    <div class=\"mn-bar\" style=\"--v:58\" data-value=\"58\"><span>May</span></div>\n    <div class=\"mn-bar\" style=\"--v:74\" data-value=\"74\"><span>Jun</span></div>\n    <div class=\"mn-bar\" style=\"--v:62\" data-value=\"62\"><span>Jul</span></div>\n    <div class=\"mn-bar\" style=\"--v:81\" data-value=\"81\"><span>Aug</span></div>\n    <div class=\"mn-bar\" style=\"--v:70\" data-value=\"70\"><span>Sep</span></div>\n    <div class=\"mn-bar\" style=\"--v:88\" data-value=\"88\"><span>Oct</span></div>\n    <div class=\"mn-bar\" style=\"--v:76\" data-value=\"76\"><span>Nov</span></div>\n    <div class=\"mn-bar mn-hl\" style=\"--v:94\" data-value=\"94\"><span>Dec</span></div>\n  </div>\n</figure>\n\n<!-- Line and area -->\n<figure class=\"mn-chart\" role=\"img\" aria-label=\"Visitors this year versus last year\">\n  <svg class=\"mn-chart-line\" data-values=\"12,18,15,24,21,30,28,36,33,41,38,47\" data-values-2=\"10,12,14,13,17,19,18,22,24,23,27,29\" data-labels=\"Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec\" data-names=\"This year,Last year\" data-unit=\"k\"></svg>\n  <ul class=\"mn-legend\"><li>This year</li><li>Last year</li></ul>\n</figure>\n\n<!-- Horizontal bars -->\n<figure class=\"mn-chart\" role=\"img\" aria-label=\"Traffic by source\">\n  <div class=\"mn-chart-bars mn-chart-h\" style=\"--max:60\">\n    <div class=\"mn-bar mn-hl\" style=\"--v:52\" data-value=\"52%\"><span>Search</span></div>\n    <div class=\"mn-bar\" style=\"--v:24\" data-value=\"24%\"><span>Direct</span></div>\n    <div class=\"mn-bar\" style=\"--v:14\" data-value=\"14%\"><span>Social</span></div>\n    <div class=\"mn-bar\" style=\"--v:10\" data-value=\"10%\"><span>Email</span></div>\n  </div>\n</figure>\n\n<!-- Donut -->\n<figure class=\"mn-chart\" style=\"justify-items:center\">\n  <div class=\"mn-donut-wrap\" role=\"img\" aria-label=\"Plan mix: Pro 45%, Team 30%, Free 15%, Enterprise 10%\">\n    <div class=\"mn-donut\" style=\"--s1:45;--s2:30;--s3:15;--s4:10\"></div>\n    <div class=\"mn-donut-label\">2,350<small>customers</small></div>\n  </div>\n  <ul class=\"mn-legend\"><li>Pro</li><li>Team</li><li>Free</li><li>Enterprise</li></ul>\n</figure>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/chart",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-chart",
        "mn-chart-bars · mn-bar",
        "mn-chart-h",
        "svg.mn-chart-line[data-values]",
        "data-labels · data-names · data-unit",
        "mn-donut · --s1…--s4",
        "mn-legend",
        "--mn-series-1…4"
      ],
      "accessibility": [
        "Charts are images: give the figure role=\"img\" and an aria-label that states the key numbers, or provide the data in a table next to it.",
        "Colour is never the only differentiator in the legend: order and labels match the series."
      ],
      "intents": [
        "bar chart",
        "line chart",
        "donut chart",
        "graph",
        "analytics chart",
        "revenue over time"
      ]
    }
  }
}