CODEWITHSUNDEEP
highcharts
shaaaa
shaaaa

Reputation: 435

Highchart: Background color of Axis

I saw a similar question here.

In reply its written that we can have background color by making a rectangle.

My question is how I can get x and Y position of all the ticks on axis. I will need it because I want background color only on alternate dates.

Thanks

Upvotes: 3

Views: 6649

Answers (2)

Mark
Mark

Reputation: 108512

Here's a quick example that shades between the 2nd and 4th ticks:

var tickStart = 1;
var tickEnd = 3;

$(function () {

   var rect = null;
   function drawRect(chart){
       if (rect){
           rect.element.remove();   
       }        

        var xAxis = chart.xAxis[0];  
        var pixStart = xAxis.toPixels (xAxis.tickPositions[tickStart], false);
        var pixEnd = xAxis.toPixels (xAxis.tickPositions[tickEnd], false);
        rect = chart.renderer.rect(pixStart, chart.chartHeight - xAxis.bottom, pixEnd - pixStart , 25, 00)
        .attr({
           'stroke-width': 0,
           stroke: '#888888',
           fill: '#888888',
           zIndex: 3
        })
        .add();
    }

    $('#container').highcharts({
        chart: {
            events: {
                load: function() {
                    drawRect(this);
                },
                redraw: function(){
                    drawRect(this);
                }
            }        
        },
        xAxis: {
        },

        series: [{
            animation: false,
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
        }]
    });
});

Fiddle here.

enter image description here

Upvotes: 4

Paweł Fus
Paweł Fus

Reputation: 45079

Did you try to use labels.formatter with background and useHTML flag? Something like this: http://jsfiddle.net/AeV7h/

    xAxis: {
        categories: ['Foo', 'Bar', 'Foobar'],

        labels: {
            useHTML: true,
            formatter: function() {
                return '<span class="hc-label">' + this.value + '</span>';
            }
        }
    },

And CSS:

.hc-label {
  background-color: red;
  padding: 0px 5px;
  color: yellow;
}

Upvotes: 4

Related Questions