pattern fill in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

pattern fill in column chart

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> 
      <script src="https://code.highcharts.com/modules/pattern-fill.js"></script> 
      <div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {/*  ww  w  .  j a v  a 2s .  co m*/
        type: 'column'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
        color: {
            pattern: {
                path: {
                    d: 'M 0 0 L 6 6 M 5 -1 L 7 1 M -1 5 L 1 7',
                    strokeWidth: 3
                },
                height: 6,
                width: 6,
                r: 4,
                color: '#d4483d'
            }
        }
    }]
});

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

Related Tutorials