HomeData Visualization
Preview
html
JanFebMarAprMayJunJulAug
Code
html
<!-- SVG Bar Chart -->
<svg viewBox="0 0 300 160" class="bar-chart" aria-label="Monthly visitors">
  <g class="bars" transform="translate(30, 10)">
    <rect x="0"   y="60"  width="28" height="80"  class="bar" />
    <rect x="40"  y="20"  width="28" height="120" class="bar accent" />
    <rect x="80"  y="45"  width="28" height="95"  class="bar" />
    <rect x="120" y="10"  width="28" height="130" class="bar accent" />
    <rect x="160" y="55"  width="28" height="85"  class="bar" />
    <rect x="200" y="35"  width="28" height="105" class="bar" />
  </g>
  <line x1="30" y1="150" x2="270" y2="150" stroke="var(--border)" />
</svg>

<style>
.bar-chart .bar       { fill: var(--border); rx: 3px; }
.bar-chart .bar.accent { fill: var(--accent); opacity: 0.8; }
</style>
Related Blocks
html
Heatmap Calendar
GitHub-activity style heatmap calendar.
html
Donut Chart
Dairesel pasta/donut grafik.
html
Line Chart
Line chart with gradient area fill.