JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="htt"

JavaScript

// Prepare the data
const data1 = [4, 6, 10, 2, 1, 4, 6, 8, 10, 7];
const data2 = [1, 8, 4, 8, 10, 8, 4, 2, 4, 5];
const pointStart = 1735729200000; // Wed Jan 01 2025
const pointInterval = 86400000; // one day

// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'line',
  },
  title: {
    text: 'Sample Line Chart',
  },
  series: [
    {
      data: data1,
      type: 'line',
      pointStart: pointStart,
      pointInterval: pointInterval,
    },
    {
      data: data2,
      type: 'line',
      pointStart: pointStart,
      pointInterval: pointInterval,
    },
  ],
  tooltip: {
    outside: true,
    split: true,
    useHTML: true,
  },
  xAxis: {
    labels: {
      allowOverlap: false,
      formatter: function () {
        return `<span>${Highcharts.dateFormat('%A, %b %e, %Y', this.value)}</span>`;
      },
      useHTML: true,
    },
    type: 'datetime',
  },
});