Highcharts Demo

author(s): Torstein Hønsi

by Salehin Modasiya

HTML

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

CSS

#container {
    max-width: 800px;
    min-width: 380px;
    height: 400px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        scrollablePlotArea: {
            minWidth: 460
        }
    },
    title: {
        text: 'Tallest buildings'
    },
    subtitle: {
        text: 'An infographic demo with the pattern fill module'
    },
    tooltip: {
        pointFormat: 'The height for <b>{point.name}</b> is <b>{point.y}</b>'
    },
    legend: {
        enabled: false
    },
    xAxis: {
        type: 'category',
        labels: {
            style: {
                fontSize: '18px'
            }
        }
    },
    yAxis: {
        title: {
            text: 'Height'
        },
        labels: {
            format: '{value}ft'
        }
    },
	dataLabels: {
      connectorColor: Highcharts.getOptions().colors[0],
      formatter: function () {
        var i = this.point.index;
        return i > 9 ?
          'Custom pattern' : // For the last one, show custom label
          'default-pattern-' + i; // Show default pattern label
      }
    },
    series: [{
        type: 'column',
        pointWidth: 110,
        pointPadding: 0.25,
        borderColor: 'transparent',
        borderWidth: 0,
        data: [{
            name: 'Petronas',
            y: 100,
            color: {
                pattern: {
                    image: 'https://www.svgrepo.com/show/27082/petronas-towers.svg',
                    aspectRatio: 1
                }
            }
        }, {
            name: 'Pisa',
            y: 150,
            color: {
				pattern: {
				image: 'https://www.svgrepo.com/show/27082/petronas-towers.svg',
					   path: {
							d: 'M 3 3 L 8 3 L 8 8 Z',
						   fill: '#102045'
					   },
					   width: 12,
					   height: 12,
					   color: '#907000',
					   opacity: 0.5
				}
			}
        }, {
            name: 'Eiffel tower',
            y: 200,
            color: {
                pattern: {
                    image: 'https://www.svgrepo.com/show/19456/tokyo-tower.svg',
                    aspectRatio: 0.8
           ...