Infographic with variwidth

author(s): Gert Vaartjes

by Gert Vaartjes

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>



<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  
  xAxis: {
    type: 'category'
  },
  series: [{
    type: 'variwide',
    pointWidth: 110,
    pointPadding: 0.25,
    borderColor: 'transparent',
    data: [{
      name: 'Petronas',
      y: 100,
      z: 1,
      color: {
        pattern: {
          image: 'https://www.svgrepo.com/show/27082/petronas-towers.svg',
          aspectRatio: 1.3
        }
      }
    }, {
      name: 'Pisa',
      y: 150,
      z: 1,
      color: {
        pattern: {
          image: 'https://www.svgrepo.com/show/1171/tower-of-pisa.svg',
          aspectRatio: 1
        }
      }
    }, {
      name: 'Eiffel tower',
      y: 200,
      z: 1,
      color: {
        pattern: {
          image: 'https://www.svgrepo.com/show/19456/tokyo-tower.svg',
          aspectRatio: 0.8
        }
      }
    }, {
      name: 'Ahu-tongariki',
      y: 250,
      z: 1,
      color: {
        pattern: {
          image: 'https://www.svgrepo.com/show/27081/ahu-tongariki.svg',
          aspectRatio: 0.75
        }
      }
    }]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500

      },
      chartOptions: {
        series: [{
          pointWidth: 55,
          keys: ['name', 'y', 'z', 'color.pattern.aspectRatio', 'color.pattern.image'],
          data: [{
            name: 'Petronas',
            y: 100,
            z: 1,
            color: {
              pattern: {
                image: 'https://www.svgrepo.com/show/27082/petronas-towers.svg',
                aspectRatio: 0.8
              }
            }
          }, {
            name: 'Pisa',
            y: 150,
            z: 1.4,
            color: {
              pattern: {
                image: 'https://www.svgrepo.com/show/1171/tower-of-pisa.svg',
                aspectRatio: 0.45
              }
            }
          }, {
            name: 'Eiffel tower',
            y: 200,
            z: 1.6,
            color: {
              pattern: {
                image:...