Charts

1
2
3<div class="chart w-100" id="chart-area-default" data-chart="area" data-chart-data='{"datasets": [{"data": [186, 305, 237, 273, 209, 214], "label": "Desktop"}, {"data": [80, 200, 120, 190, 130, 140], "label": "Mobile"}], "labels": ["Apr", "May", "Jun", "Jul", "Aug", "Sep"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Area chart comparing desktop and mobile visitors over six months"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-area-step" data-chart="area" data-chart-data='{"datasets": [{"data": [120, 160, 140, 210, 190, 240], "label": "Visitors", "stepped": true}], "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Stepped area chart showing visitor changes across six months"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-area-stacked" data-chart="area" data-chart-data='{"datasets": [{"data": [62, 78, 83, 91], "label": "Desktop", "stack": "traffic"}, {"data": [48, 64, 72, 86], "label": "Mobile", "stack": "traffic"}], "labels": ["Q1", "Q2", "Q3", "Q4"]}' data-chart-options='{"scales": {"y": {"stacked": true}}}' style="height: 17.5rem">
  <canvas role="img" aria-label="Stacked area chart comparing desktop and mobile traffic by quarter"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-bar-default" data-chart="bar" data-chart-data='{"datasets": [{"data": [120, 190, 150, 220, 180, 90, 110], "label": "Visitors"}], "labels": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Bar chart of daily active visitors across the week"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-bar-horizontal" data-chart="bar" data-chart-data='{"datasets": [{"data": [242, 184, 156, 93], "label": "Sessions"}], "labels": ["Organic", "Referral", "Direct", "Social"]}' data-chart-options='{"indexAxis": "y"}' style="height: 17.5rem">
  <canvas role="img" aria-label="Horizontal bar chart comparing traffic sessions by channel"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-bar-multiple" data-chart="bar" data-chart-data='{"datasets": [{"data": [38, 44, 57, 63], "label": "New"}, {"data": [52, 61, 68, 74], "label": "Returning"}], "labels": ["Q1", "Q2", "Q3", "Q4"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Grouped bar chart comparing new and returning accounts by quarter"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-bar-stacked" data-chart="bar" data-chart-data='{"datasets": [{"data": [34, 45, 49, 53], "label": "Desktop", "stack": "traffic"}, {"data": [28, 38, 44, 51], "label": "Mobile", "stack": "traffic"}], "labels": ["Q1", "Q2", "Q3", "Q4"]}' data-chart-options='{"scales": {"x": {"stacked": true}, "y": {"stacked": true}}}' style="height: 17.5rem">
  <canvas role="img" aria-label="Stacked bar chart comparing desktop and mobile traffic by quarter"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-bar-negative" data-chart="bar" data-chart-data='{"datasets": [{"data": [12, -8, 18, -5, 24], "label": "Net change"}], "labels": ["Jan", "Feb", "Mar", "Apr", "May"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Bar chart showing positive and negative net change by month"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-line-default" data-chart="line" data-chart-data='{"datasets": [{"data": [4000, 3200, 4800, 5100, 4600, 5800, 6200, 6900], "label": "Revenue"}, {"data": [3800, 4000, 4200, 4600, 5000, 5400, 5800, 6200], "label": "Target"}], "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Line chart comparing monthly revenue against target"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-line-plain" data-chart="line" data-chart-data='{"datasets": [{"data": [22, 24, 27, 26, 31, 34], "fill": false, "label": "Conversion"}], "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Plain line chart showing conversion rate over six months"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-line-step" data-chart="line" data-chart-data='{"datasets": [{"data": [50, 50, 75, 75, 100, 100], "fill": false, "label": "Plan limit", "stepped": true}], "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Stepped line chart showing plan limit changes over six months"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-line-multiple" data-chart="line" data-chart-data='{"datasets": [{"data": [42, 49, 53, 57, 62], "fill": false, "label": "Desktop"}, {"data": [31, 36, 44, 48, 55], "fill": false, "label": "Mobile"}], "labels": ["W1", "W2", "W3", "W4", "W5"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Multiple line chart comparing desktop and mobile weekly usage"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-pie-default" data-chart="pie" data-chart-data='{"datasets": [{"data": [42, 28, 18, 12], "label": "Traffic"}], "labels": ["Direct", "Search", "Referral", "Social"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Pie chart showing traffic share by channel"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-doughnut-default" data-chart="doughnut" data-chart-data='{"datasets": [{"data": [44, 39, 17], "label": "Plans"}], "labels": ["Basic", "Pro", "Enterprise"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Doughnut chart showing plan distribution"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-doughnut-ring" data-chart="doughnut" data-chart-data='{"datasets": [{"data": [44, 39, 17], "label": "Plans"}], "labels": ["Basic", "Pro", "Enterprise"]}' data-chart-options='{"cutout": "72%"}' style="height: 17.5rem">
  <canvas role="img" aria-label="Doughnut ring chart showing plan distribution"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-radar-default" data-chart="radar" data-chart-data='{"datasets": [{"data": [8, 7, 9, 8, 6], "label": "Current"}], "labels": ["Speed", "Quality", "Support", "Reliability", "Cost"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Radar chart comparing operational dimensions"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-radar-multiple" data-chart="radar" data-chart-data='{"datasets": [{"data": [8, 7, 9, 8, 6], "label": "Current"}, {"data": [9, 9, 9, 9, 7], "label": "Target"}], "labels": ["Speed", "Quality", "Support", "Reliability", "Cost"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Radar chart comparing current and target operational profiles"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-polar-area" data-chart="polarArea" data-chart-data='{"datasets": [{"data": [30, 45, 28, 36], "label": "Regions"}], "labels": ["North", "South", "East", "West"]}' style="height: 17.5rem">
  <canvas role="img" aria-label="Polar area chart comparing regional volume"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-radial-progress" data-chart="doughnut" data-chart-data='{"datasets": [{"data": [72, 28], "label": "Progress"}], "labels": ["Complete", "Remaining"]}' data-chart-options='{"circumference": 180, "cutout": "72%", "rotation": -90}' style="height: 17.5rem">
  <canvas role="img" aria-label="Radial progress doughnut chart showing completion percentage"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-scatter-default" data-chart="scatter" data-chart-data='{"datasets": [{"data": [{"x": 12, "y": 18}, {"x": 19, "y": 26}, {"x": 28, "y": 32}, {"x": 38, "y": 44}], "label": "Leads"}], "labels": []}' style="height: 17.5rem">
  <canvas role="img" aria-label="Scatter chart plotting leads by fit and intent scores"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-bubble-default" data-chart="bubble" data-chart-data='{"datasets": [{"data": [{"r": 6, "x": 10, "y": 20}, {"r": 10, "x": 18, "y": 28}, {"r": 14, "x": 26, "y": 35}, {"r": 9, "x": 34, "y": 44}], "label": "Deals"}], "labels": []}' style="height: 17.5rem">
  <canvas role="img" aria-label="Bubble chart plotting deals by fit intent and value radius"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-tooltip-index" data-chart="line" data-chart-data='{"datasets": [{"data": [42, 49, 53, 57, 62], "fill": false, "label": "Desktop"}, {"data": [31, 36, 44, 48, 55], "fill": false, "label": "Mobile"}], "labels": ["W1", "W2", "W3", "W4", "W5"]}' data-chart-options='{"interaction": {"intersect": false, "mode": "index"}}' style="height: 17.5rem">
  <canvas role="img" aria-label="Line chart demonstrating index tooltip interaction"></canvas>
</div>

1
2
3<div class="chart w-100" id="chart-tooltip-nearest" data-chart="scatter" data-chart-data='{"datasets": [{"data": [{"x": 12, "y": 18}, {"x": 19, "y": 26}, {"x": 28, "y": 32}, {"x": 38, "y": 44}], "label": "Leads"}], "labels": []}' data-chart-options='{"interaction": {"intersect": true, "mode": "nearest"}}' style="height: 17.5rem">
  <canvas role="img" aria-label="Scatter chart demonstrating nearest tooltip interaction"></canvas>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<div class="d-grid gap-3 w-100" data-chart-live>
  <div class="d-flex flex-wrap align-items-center justify-content-center gap-2">
    <span data-chart-theme>
      <button class="btn btn-outline-secondary btn-sm" type="button">
        <i class="lucide lucide-moon-star" data-icon="inline-start" aria-hidden="true"></i>
        Toggle theme
      </button>
    </span>
    <button class="btn btn-outline-secondary btn-sm" type="button" data-chart-lifecycle data-chart-lifecycle-state="live">
      <i class="lucide lucide-circle-off" data-icon="inline-start" aria-hidden="true"></i>
      <span data-chart-lifecycle-label>Dispose</span>
      <i class="lucide lucide-rotate-cw" data-icon="inline-end" aria-hidden="true"></i>
    </button>
    <span class="visually-hidden" data-chart-status aria-live="polite">Live</span>
  </div>
  <div class="chart w-100" id="chart-lifecycle-example" data-chart="line" data-chart-data='{"datasets": [{"data": [18, 24, 21, 30], "label": "Pipeline"}], "labels": ["Q1", "Q2", "Q3", "Q4"]}' style="height: 17.5rem">
    <canvas role="img" aria-label="Lifecycle chart showing quarterly pipeline movement"></canvas>
  </div>
</div>