Javascript examples for highcharts:Column Chart
the x axis is divided into categories in column chart
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () {// w ww .j a v a 2s . co m $('#container').highcharts({ title: { text: 'Search Inefficiency' }, xAxis: { categories: ['Experiment 1', 'Experiment 2', 'Experiment 3', 'Experiment 4'], }, yAxis: { reversedStacks: false, min: 0, plotLines: [{ label: { text: 'Error Bar', x: 1.25 }, color: 'red', width: 2, value: 1, dashStyle: 'longdashdot' }], title: { text: 'Search inefficiency', align: 'middle' }, labels: { overflow: 'justify' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -40, y: 80, floating: false, borderWidth: 1, backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), shadow: true }, series: [ { name: '0 degrees', type: 'column', data: [0.43,0.36,0.53,0.52] }, { name: '45 degrees', type: 'column', data: [0.94,1.00,1.22,0.87] }, { name: '90 degrees', type: 'column', data: [1.01,1.13,1.45,1.08] }, { name: '135 degrees', type: 'column', data: [0.78,0.95,1.36,1.00] },{ name: '180 degrees', type: 'column', data: ["",0.48,0.83,0.62] }] }); }); </script> </head> <body> <script src="https://code.highcharts.com/highcharts.js"></script> <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> </body> </html>