X-range series

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div> 
</figure>

CSS

#container {
    height: 300px;
}

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

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

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.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 tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

let data  = [
    {
        "x": "Date.UTC(2018, 8, 18)",
        "x2": "Date.UTC(2023, 6, 20)",
        "x3": 1000050000,
        "x4": 999993580,
        "y": 0,
        "color": "#F3BABD",
        "partialFill": 0
    },
    {
        "x": "Date.UTC(2018, 8, 18)",
        "x2": "Date.UTC(2023, 6, 20)",
        "x3": 1000050000,
        "x4": 999993580,
        "y": 1,
        "color": "#F3BABD",
        "partialFill": 0
    },
    {
        "x": "Date.UTC(2018, 8, 18)",
        "x2": "Date.UTC(2023, 6, 20)",
        "x3": 1000050000,
        "x4": 999993580,
        "y": 2,
        "color": "#F3BABD",
        "partialFill": 0
    }
];
let categories = ["uesr1", "user2", "user3"];
Highcharts.chart('container', {
    chart: {
          type: "xrange",
          height: "300px",
          style: {
            fontFamily: "Open Sans",
            // marginLeft: "-5px",
          }
        },
        title: null,
        legend: {
          enabled: false,
          itemStyle: {
            font: '10px',
            color: '#1D1D1D',
            fontWeight: 'normal',
          },
        },
        credits: {
          enabled: false,
        },
        xAxis: {
          type: 'datetime',
          title: {
            text: '<b>Package</b>'
          },
        },
        title: {
          text: ''
        },
        yAxis: {
          title: {
            text: '<b>Users</b>'
          },
          categories: categories,
          reversed: true
        },
        tooltip: {
     
        },
        series: [{
          // name: 'Date-->',
          pointPadding: 2,
          groupPadding: 0,
          borderColor: 'none',
          borderRadius: '0',
          showInLegend: true,
          partialFill: {
            fill: '#99D6FF' /* default color of the filled part of the bar */
          },
          pointWidth: 20,
          data: data,
          dataLabels: {
            enabled: true,
            style: {
              textOutline: 'none',
             ...