🤖 Cannot save fiddle

[nguyetnt24388-ops]

Error code

ERRW:1.0:K1.0

Were you logged in?

Yes

Your username (if logged in)

No response

Your HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing stacked horizontal bars. This type of visualization is
        great for comparing data that accumulates up to a sum.
    </p>
</figure>

Your JavaScript

// Data retrieved from: https://ferjedatabanken.no/statistikk
Highcharts.chart('container', {
  chart: {
    type: 'bar',
  },

  title: {
    text: 'ONTOP',
    align: 'left',
  },

  xAxis: {
    categories: [
      'A,
      'B',
      'C,
      'D,
      'E',
    ],
  },

  yAxis: {
    min: 0,
    title: { text: '' },
    stackLabels: {
      enabled: true,
      style: { fontWeight: 'bold' },
      formatter: function () {
        return Highcharts.numberFormat(this.total, 0, '.', ',');
      },
    },
  },

  legend: {
    align: 'right',
    verticalAlign: 'top',
    layout: 'vertical',
    reversed: false,
  },

  tooltip: {
    shared: true,
    formatter: function () {
      let s = `<b>${this.x}</b><br/>`;
      let total = 0;

      this.points.forEach((p) => {
        total += p.y;
        s += `${p.series.name}: <b>${Highcharts.numberFormat(p.y, 0, '.', ',')}</b><br/>`;
      });

      s += `<br/>Tổng: <b>${Highcharts.numberFormat(total, 0, '.', ',')}</b>`;
      return s;
    },
  },

  plotOptions: {
    series: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        formatter: function () {
          // chỉ hiện label nếu >0 để đỡ rối
          return this.y > 0 ? Highcharts.numberFormat(this.y, 0, '.', ',') : '';
        },
      },
    },
  },

  series: [
    // Bạn có thể sắp xếp lại thứ tự series theo ý muốn để "quá hạn" nổi bật
    { name: 'Đã xử lý trong hạn', data: [1093, 6, 225, 62, 113] },
    { name: 'Đã xử lý quá hạn', data: [161, 0, 73, 6, 46] },
    { name: 'Đang xử lý trong hạn', data: [466, 0, 11, 17, 38] },
    { name: 'Đang xử lý quá hạn', data: [56, 0, 6, 5, 18] },
    { name: 'Chờ xử lý', data: [186, 31, 95, 20, 6] },
    { name: 'Đã từ chối', data: [0, 1553, 3, 164, 0] },
  ],
});

Your CSS

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60, #666);
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tbody tr:nth-child(even) {
    background: var(--highcharts-neutral-color-3, #f7f7f7);
}

.highcharts-description {
    margin: 0.3rem 10px;
}