Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Shadow in Highcharts bar chart

Tags:

I want to give 5 px shadow in right side of the bar. Is it possible?

I want to give 5 px shadow in right side o

like image 205
ali Avatar asked May 13 '16 11:05

ali


1 Answers

You should use the Renderer which allows to add custom paths in chart. Knowing that, catch the load event and iterate on each series point, adding line in right side.

chart: {
  type: 'column',
  events: {
    load: function() {
      var chart = this,
        series = chart.series,
        each = Highcharts.each,
        r = chart.renderer,
        borderWidth  = 2,
        x,y;

      each(series, function(s, i) {
        each(s.data, function(p, j) {
                        x = p.plotX + chart.plotLeft + (p.pointWidth / 2);
                        y = p.plotY + chart.plotTop + borderWidth;

          r.path(['M', x, y, 'L', x, y + p.shapeArgs.height])
          .attr({
            zIndex: 10,
            'stroke-width': borderWidth,
            'stroke': 'gray'
          })
          .add()
        });
      });
    }
  }
},

Example: - http://jsfiddle.net/2reombm7/

like image 77
Sebastian Bochan Avatar answered Sep 28 '22 02:09

Sebastian Bochan