highcharts configuration

Question

I would like to buidl exact this type of graph by highcharts.

Please follow the link - like this graph

I have already build something - mygraph

but I need to fill the full column with different color and the x-axis label will show on hover.

$(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column',
      height: 400,
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    tooltip: {
      //xDateFormat: '%Y-%m-%d',
      formatter: function() {
        return "Click to see all coverage from - " + Highcharts.dateFormat("%b %d", this.x)
      },
      positioner: function(boxWidth, boxHeight, point) {
        return {
          x: point.plotX,
          y: point.plotY
        };
      },
    },
    xAxis: {
      gridLineWidth: 0,
      type: 'datetime',
      dateTimeLabelFormats: {
        day: ' %b %e, %Y'
      }
    },
    yAxis: {
      gridLineWidth: 1,
      title: {
        text: ''
      },
      labels: {
        enabled: true
      }
    },
    legend: {
      enabled: false
    },

    series: [{
      data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      pointStart: Date.UTC(2010, 0, 1),
      pointInterval: 24 * 3600 * 1000 // one day
    }],

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500px"></div>

Answer 1

Just for fun, cause is and old theme, but interesting.

Option one could be creating an stacked column chart and disabling tooltip on one of the series... not a very good one, haha (please, don't do this guys). A better one solution and close enough approach, would be create plotLines for each point.

First problem is that we need to create as many plotLines as columns. So instead of doing this in options, we'll do it after the chart is rendered and check for series data length.

chart.series[0].data.length

Second problem is that we must set plotLine width, so we should check before for point width of a column in order to set the plotLine width equal to our columns.

var plotWidth = chart.series[0].points[0].pointWidth;

Third problem is that our chart is fixed, and that's ok, but if our container is responsive, our chart and columns' width will change, but our plotLines' width won't. So we could set your column width to a fixed value and our plotLines too or, even better, change our plotLines width at window resize event. But I think is faster and cleaner just remove 'em and generate again. If we use same id for all plots (I know is wrong but it's effective, meh) we don't need to go through the array and we are able to remove all in a single line.

chart.xAxis[0].removePlotLine('plot-line');

Piece of code of important things:

// add plotLines
function addPlotLines(chart, plotWidth) {           
    for(var i = 0; i<= chart.series[0].data.length; i++) {            
        chart.xAxis[0].addPlotLine({
                    color: 'rgba(124, 181, 236,.3)',
                    width: plotWidth,
                    value: Date.UTC(2010, 0, i),
                    dashStyle: 'solid',
                    id: 'plot-line' 
        });
    }
}

// remove PlotLines
function removePlotLines(chart) {
    chart.xAxis[0].removePlotLine('plot-line');
}

// add event resize
window.onresize = function() {
  removePlotLines(chart);
  var plotWidth = chart.series[0].points[0].pointWidth;
  addPlotLines(chart, plotWidth);
};

// initialize
var plotWidth = chart.series[0].points[0].pointWidth;
addPlotLines(chart, plotWidth);

Here we go, full code and demo at http://jsfiddle.net/wbsCu/14/

And take a look at this for the show-label-on-point-hover issue not covered here Bold X-Axis Label on Point Hover in Highcharts Column Chart.

Have fun!

Answer 2

You are looking to disable x-axis labels and change the series color.

You can disable X-axis values by

xAxis: {
    labels: {
              enabled:false
            }
        }

There are more than 1 ways of setting colors in Highcharts. One way is by specifying color in series.

   series: [{
        data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000 ,// one day,
        color:"#33333"
    }]

JSFiddle Demo