Highcharts Demo

by maritavindedal

HTML

<script src="https://github.highcharts.com/7b3f19cd62/highcharts.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/highcharts-more.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/data.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/a11y.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/sankey.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/histogram-bellcurve.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/heatmap.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/treemap.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/wordcloud.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/solid-gauge.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/dumbbell.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/funnel.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/dependency-wheel.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/networkgraph.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/tilemap.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/organization.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/sunburst.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/timeline.js"></script>
<script src="https://github.highcharts.com/7b3f19cd62/modules/annotations.js"></script>

<div class="shell">
  <header class="topbar" aria-label="Dashboard header">
    <div class="title">
      <h1>Description Dashboard</h1>
      <span>Explore different chart descriptions</span>
    </div>
  </header>

  <main class="dashboard" aria-label="Charts grid">

    <!-- ===== Row 1 ===== -->
    <section class="row">
     ...

CSS

/* page background */
.shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    background:
        radial-gradient(1200px 600px at -10% -10%, #f9fafb 40%, transparent 41%),
        radial-gradient(1000px 500px at 110% 0%, #f3f4f6 40%, transparent 41%),
        #f7f7fb; /* subtle overall tint */
}

/* cards: slight elevation */
.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 6px 16px rgba(17, 24, 39, 0.06); /* soft, modern */
}

/* header */
.topbar {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.topbar .title h1 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
}

.topbar .title span {
    color: #6b7280;
}

/* grid */
.dashboard {
    padding: 1.25rem;
    display: grid;
    gap: 0.75rem;
}

.row-title {
    margin: 1.25rem 0 0.25rem;
    font-size: 1.125rem;
    color: #111827;
}

.row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

/* cards */
.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
}

.card-header {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #f3f4f6;
}

.card-title {
    margin: 0;
    font-size: 1rem;
}

.chart-wrapper {
    padding: 0.5rem 0.75rem 0.75rem;
}

.chart-area {
    width: 100%;
    height: 280px; /* tweak height as you like */
}

/* Taller charts for second row */
.row-tall .chart-area {
    height:...

JavaScript

// Spline w/Plotlines
const chart1desc = `
    <p> Helsinki temperatures rise steadily from winter lows below zero to
    a summer peak around July, before cooling again toward December.
    Summer (May–September) is highlighted as the warmest period. </p>
    <ul>
        <li>X-axis: Months January–December</li>
        <li>Y-axis: Temperature in °C, range –10°C to 20°C</li>
    </ul>
    <ul>
        <li>Highest value: ~17°C in July</li>
        <li>Lowest value: ~–6°C in February</li>
        <li>Summer period marked: May–September</li>
        <li>Crosses above freezing (0°C) in April, falls below again 
        in November</li>
    </ul>
`;

// Stacked column
const chart2desc = `
    <p>Tokyo leads in both Espresso consumption and overall total.</p>
    <ul>
        <li>X-axis: HQ, Berlin, New York, Tokyo</li>
        <li>Y-axis: Cups of Coffee, range 0–400</li>
    </ul>
    <ul>
        <li>Highest value: 360 total cups in Tokyo</li>
        <li>Lowest value: 260 total cups in Berlin</li>
    </ul>
`;


// Big heatmap
const chart3desc = `
    <p>Temperatures vary by both season and time of day, with the 
    warmest conditions in July and cooler periods at the start and 
    end of the year. </p>
    <ul>
        <li>X-axis: Months January–December (2023)</li>
        <li>Y-axis: Hours of the day (0:00–18:00)</li>
        <li>Range: –10°C to 20°C</li>
    </ul>
    <ul>
        <li>Highest temperatures: July, reaching around 20°C</li>
        <li>Lowest temperatures: January, dropping to –10°C</li>
        <li>Daytime generally warmer than nighttime across all months</li>
    </ul>
`;

// Gauge
const chart4desc = `
    <p> The needle points to about 92%, which sits in the yellow watch zone.
    The scale is color-coded to show healthy, watch, and overspend ranges. </p>
    <ul>
        <li>Current value: ~92% (yellow watch zone)</li>
        <li>Threshold for watch: above 80%</li>
       ...