Variwide

author(s): Torstein Hønsi

by amrutaJgtp

HTML

<script src="https://github.highcharts.com/bc682f0/highcharts.js"></script>
<script src="https://github.highcharts.com/bc682f0/modules/variwide.js"></script>

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


<script>
  $(document).ready(function() {
    // Add click event listener to each column
    $('.column').click(function() {
      // Reset all columns to have black border
      $('.column').css('border-color', 'black');
      
      // Set the clicked column's border color to green
      $(this).css('border-color', 'green');
    });
  });
</script>

CSS

#container {
    height: 500px;
}

.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

Highcharts.chart("container", {
  chart: {
    zoomType: "xy",
  },

  plotOptions: {
    series: {
      allowPointSelect: true,
      showInLegend: true,
      turboThreshold: 0,
      stickyTracking: false,
      events: {},
      states: {
        select: {
          fillColor: null,
          borderWidth: 2,
          borderColor: "green",
        },
      },
      point: { events: {} },
      borderRadius: 0,
    },
  },
  legend: {
    enabled: true,
    borderWidth: 0,
    layout: "horizontal",
    backgroundColor: "rgba(255,255,255,0)",
    align: "center",
    verticalAlign: "bottom",
    margin: 0,
    padding: 5,
  },
  series: [
    {
      zIndex: 1,
      internalName: "AUTO",
      type: "variwide",
      data: [
        {
          y: 14,
          z: 9.709999999999999,
          x: 2.9,
        },
        {
          y: 31,
          z: 9.71,
          x: 12.61,
        },
        {
          y: 29,
          z: 9.71,
          x: 22.32,
        },
        {
          y: 42,
          z: 9.71,
          x: 32.03,
        },
        {
          y: 32,
          z: 9.71,
          x: 41.74,
        },
        {
          y: 38,
          z: 9.71,
          x: 51.45,
        },
        {
          y: 39,
          z: 9.71,
          x: 61.160000000000004,
        },
        {
          y: 42,
          z: 9.709999999999994,
          x: 70.87,
        },
        {
          y: 71,
          z: 9.709999999999994,
          x: 80.58,
        },
        {
          y: 125,
          z: 9.709999999999994,
          x: 90.28999999999999,
        },
        {
          y: 43,
          z: 9.709999999999994,
          x: 99.99999999999999,
        },
      ],
      dataLabels: { enabled: false },
      name: "Values",
      showInLegend: true,
      tooltipBackgroundColor: "#ffffff",
      point: { events: {} },
      color: "rgba(0,41,170,1)",
      borderColor: "rgba(255,255,255,1)",
      fillColor: "rgba(0,41,170,1)",
      depth: 40,
     ...