Highcharts Demo

author(s): Torstein Hønsi

by javiros

HTML

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

<div id="container" style="height: 600px; min-width: 350px; max-width: 700px; margin: 0 auto"></div>

CSS

.highcharts-tooltip h3 {
    margin: 0.3em 0;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'bubble',
        plotBorderWidth: 1
    },
    credits: {
    	enabled: false
    },
    
    exporting: {
    	enabled: false
    },

    legend: {
        enabled: false
    },

    title: {
        text: 'Common words over time'
    },
    xAxis: {
        gridLineWidth: 1,
        tickInterval: 1,
        title: {
            text: 'Time period'
        },
        labels: {
            format: '{value} hr'
        },
        
    },

    yAxis: {
        startOnTick: false,
        endOnTick: false,
        title: {
            text: 'Words'
        },
        categories: ['aldi', 'store', 'court', 'eggs', 'products', 'customers', 'video', 'market', 'product', 'wine']
        
    },

    
    plotOptions: {
        bubble: {
          minSIze:'5%',
          maxSize:'9%'
        }    
       
    },

    series: [{
        data: [
            { x: 00, y: 0, z: 147, color: 'rgba(255, 0, 0, 0.5)' },
{ x: 00, y: 1, z: 35, color: 'rgba(255, 255, 0, 0.5)' },
{ x: 00, y: 2, z: 175, color: 'rgba(128, 0, 128, 0.5)' },
{ x: 00, y: 3, z: 173, color: 'rgba(153, 153, 153, 0.5)' },
{ x: 00, y: 4, z: 58, color: 'rgba(128, 0, 128, 0.5)' },
{ x: 00, y: 5, z: 195, color: 'rgba(0, 204, 0, 0.5)' },
{ x: 00, y: 6, z: 125, color: 'rgba(0, 204, 204, 0.5)' },
{ x: 00, y: 7, z: 72, color: 'rgba(102, 0, 0, 0.5)' },
{ x: 00, y: 8, z: 4, color: 'rgba(0, 0, 255, 0.5)' },
{ x: 00, y: 9, z: 99, color: 'rgba(255, 102, 128, 0.5)' },

{ x: 01, y: 0, z: 247, color: 'rgba(255, 0, 0, 0.5)' },
{ x: 01, y: 1, z: 135, color: 'rgba(255, 255, 0, 0.5)' },
{ x: 01, y: 2, z: 75, color: 'rgba(128, 0, 128, 0.5)' },
{ x: 01, y: 3, z: 173, color: 'rgba(153, 153, 153, 0.5)' },
{ x: 01, y: 4, z: 158, color: 'rgba(128, 0, 128, 0.5)' },
{ x: 01, y: 5, z: 95, color: 'rgba(0, 204, 0, 0.5)' },
{ x: 01, y: 6, z: 125, color: 'rgba(0, 204, 204, 0.5)' },
{ x: 01, y: 7, z: 72, color: 'rgba(102, 0, 0, 0.5)' },
{ x: 01, y: 8, z: 224, color: 'rgba(0, 0, 255,...