Highcharts Demo

author(s): Torstein Hønsi

by ninachroscicka

HTML

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

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: ' '
    },
    xAxis: {
        categories: ['Embarassment', 'Amusement', 'Objects', 'Fear', 'Happiness','Nature','Food&Drinks','Fruits','Sadness','Sport','Satisfaction'],
        lineColor:'transparent',
     		tickLength:0  
    },
    yAxis: {visible:false
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}%'
    },
    plotOptions: {


       column: {
            groupPadding:0.001,
            pointWidth:15,
            borderRadius: 5,
            dataLabels: {
                enabled: true,
                crop: false,
                format: '{point.y}%',
                
                
                //formatter: function() {
       					//		return this.value+"%";
    						//		},
                overflow: 'none',
                style: {
          				fontSize:'11px',
            			fontFamily : 'Helvetica'
          			}
                
            }
        }
    },
    series: [{
        data: [20 , 20, 5, 20, 10,10,15,5,8,12,3],
        color:'#73b5c3'
    }]
});