bar data, borders fit to the data - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

bar data, borders fit to the data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 300px"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {/*w  ww. j av a  2 s. c o  m*/
      type: 'column',
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ["17 avr. 18","18 avr. 18","19 avr. 18","20 avr. 18","21 avr. 18","22 avr. 18","23 avr. 18","24 avr. 18","25 avr. 18","26 avr. 18","27 avr. 18","28 avr. 18","29 avr. 18","30 avr. 18","01 mai 18","02 mai 18","03 mai 18","04 mai 18","05 mai 18","06 mai 18","07 mai 18","08 mai 18","09 mai 18","10 mai 18","11 mai 18","12 mai 18","13 mai 18","14 mai 18","15 mai 18","16 mai 18","17 mai 18","18 mai 18","19 mai 18","20 mai 18","21 mai 18","22 mai 18","23 mai 18","24 mai 18","25 mai 18","26 mai 18","27 mai 18","28 mai 18","29 mai 18","30 mai 18","31 mai 18","01 juin 18","02 juin 18","03 juin 18","04 juin 18","05 juin 18","06 juin 18","07 juin 18","08 juin 18","09 juin 18","10 juin 18","11 juin 18","12 juin 18","13 juin 18","14 juin 18","15 juin 18","16 juin 18","17 juin 18","18 juin 18","19 juin 18","20 juin 18","21 juin 18","22 juin 18","23 juin 18","24 juin 18","25 juin 18","26 juin 18","27 juin 18","28 juin 18","29 juin 18","30 juin 18","01 juil. 18","02 juil. 18","03 juil. 18","04 juil. 18","05 juil. 18","06 juil. 18","07 juil. 18","08 juil. 18","09 juil. 18","10 juil. 18","11 juil. 18","12 juil. 18","13 juil. 18","14 juil. 18","15 juil. 18","16 juil. 18","17 juil. 18"]
    },
    yAxis: {
        minPadding: 0.01,
        maxPadding: 0.01,
        startOnTick: false,
            endOnTick: false
     },
    series: [{"name":"1","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,500,485,162,440,725,180,0,1000,880,445,955,555,120,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"type":"column"},{"name":"2","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,188.98,283.94,114.31,415.84,858.24,256,0,1221.87,1091.28,638.97,1442.15,812.07,168.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"type":"column"},{"name":"3","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,311.02,201.06,47.69,24.16,-133.24,-76,0,-221.87,-211.28,-193.97,-487.15,-257.07,-48.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"type":"column"}]
});

      </script>  
   </body>
</html>

Related Tutorials