CODEWITHSUNDEEP
javascriptjquerygraphchartshighcharts
infinityskyline
infinityskyline

Reputation: 409

combination chart (area and bar) highchart

I have a bar graph, I want to plot a shaded area on the same graph whose max and min range say are -1000k and -1250k, which most probably is a area-range graph. I cannot find an example in highchart doc, so need help.

The graph I have now -> http://jsfiddle.net/hhh2zx3w/6/

var c2chart3=Highcharts.chart("container1", {
    colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],

    chart: {
        type: 'bar',
        backgroundColor: 'rgba(0,0,0,0.7)',
        style: {
          color: '#FFF',
          fontSize: '9px',
          fontFamily: 'MP'
        },
    },
    title: {
       text: ''
    },
    xAxis: {
       title: {
        text: null
       },
       gridLineWidth:0,
        lineWidth:0,
        tickWidth: 0,
        title: {
         text: ''
        },
        labels: {
         style: {
          color: '#FFF',
          fontSize: '9px',
          fontFamily: 'MP'
         },
        formatter: function(){
          return ""
        }
      },
    },
    yAxis: {
     // min: -2000000,
     // max: 1000000,
     gridLineColor: '#fff',
     gridLineWidth: 0,
     lineWidth:0,
     plotLines: [{
      color: '#fff',
      width: 1,
      value: 0
     }],
     title: {
      text: '',
      align: 'high'
     },
     title: {
       text: ''
     },
     labels: {
      style: {
        color: '#FFF',
        fontSize: '9px'
      },
   },
  },
  tooltip: { enabled: false },
  credits: { enabled: false },
  exporting: { enabled: false }, 
  plotOptions: {
   bar: {
    dataLabels: {
    enabled: true,
    style: {
      textOutline: false,
      color:'#fff',
     }
    }
   },
   series: {
    colorByPoint: true,
    pointWidth: 1,
    borderWidth:0,
    dataLabels: {
     enabled: true,
     formatter: function(){
    }
   }
  }
 },
 legend: { enabled: false },
 credits: { enabled: false },
 series: [{
    data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
 }]
});

What I want is something like shown in the imageenter image description here

Upvotes: 1

Views: 62

Answers (1)

Strikers
Strikers

Reputation: 4776

The feature you are referring to is called as the "Plot Bands" in Highchart

Here is how you can do it.

plotBands: [{
    color: 'tomato',
    from: -1000000,
    to: -1250000
}],

you can have plot bands with respect to any axis.

Here is a jsfiddle for your ref: http://jsfiddle.net/hhh2zx3w/7/

Highcharts API ref: https://api.highcharts.com/highcharts/yAxis.plotBands

Upvotes: 1

Related Questions