Can i show table on x-axis as like grouped categories in highcharts - But no grouping

0
votes

I just want to show table just below the X-axis column charts (respective bars), I know grouping can create table but i don't want grouping to be used. just need table for x-axis values. As shown in below image,

Can i do this using highcharts properties. Only table will be present to x-axis labels.

Is it possible using highcharts lib ?

enter image description here

1
javascripthtmlhighcharts
something like this ? – Punit Gajjar
No. the table you are seeing in image on x-axis exactly like that. – Amit Patange
jsfiddle.net/BlackLabel/TFhd7/… – Amit Patange

1 Answers

0
votes

You can make ticks longer by setting xAxis.tickLength property. And then, render an additional line in the bottom of the ticks.

function renderBottomLine() {
    var chart = this,
      axis = chart.xAxis[0],
      line = axis.bottomLine,
      x1 = chart.plotLeft,
      y = chart.plotTop + chart.plotHeight + axis.options.tickLength,
      x2 = x1 + chart.plotWidth,
      path = [
        'M', x1, y,
        'L', x2, y
      ];

  if (!line) {
    axis.bottomLine = chart.renderer.path(path).attr({
      'stroke-width': 1,
      stroke: '#ccd6eb'
    }).
    add();
  } else {
    line.animate({
        d: path
    });
  }
}

Highcharts.chart('container', {
        chart: {
            events: {
            load: renderBottomLine,
            redraw: renderBottomLine
          }
        },

example: http://jsfiddle.net/xuyyt6nd/