CODEWITHSUNDEEP
highcharts
jem
jem

Reputation: 51

High chart width issue

{
   colors: ['red','#009966'],
   chart: {
          height: 150,
          width: 350,
          type: 'bar',
          backgroundColor: '#efefef',
          marginLeft:150
         },
   title: {
          text: 'Workgroup Ticket in SLA',
          style: {
          color: 'black',
          fontWeight: 'bold',
          fontSize: '16px'
          }
    },
    xAxis: {
           x:-15,
           y:2,
           lineColor: '#82CAFF',
           lineWidth: 1,
           categories: ['AS Front End Eng.', 'AS FFE Support', 'AS UI Transaction','AS UI Merchandizing','AS UI Infrastructure','AS Website Festures'],
           labels: {
           style: {
                   color: 'black',
                   fontSize: '8px',
                   fontWeight: 'bold',
                   fontFamily: 'Verdana, sans-serif'
                  }
                }
            },
            yAxis: {
                lineColor: '#82CAFF',
                lineWidth: 1,
                gridLineDashStyle: 'dot',
                tickPositions: [0,20,40,60,80,100],
                width:160,
                title: {
                    text: ''
                },
                labels: {
                style: {
                    color: 'black',
                    fontSize: '9px',
                    fontWeight: 'bold',
                    fontFamily: 'Verdana, sans-serif'
                }
                }
            },
            legend: {
                enabled: false,
                backgroundColor: '',
                reversed: true
            },
            plotOptions: {

                series: {
                    stacking: 'normal',                      
                }
            },
                series: [ {
                name: '',
                data: [0, 5, 62, 50, 22,22]
            },
                         {
                name: '',
                data: [100,95,38,50,78,78]
           }
     ]
 }

This is the jsfiddle link http://jsfiddle.net/SMrKu/

I want to remove the extra space created in boxh left and right hand side of the high chart.

But on reducing the width it is showing error in high chart.

Upvotes: 1

Views: 11572

Answers (2)

Rajshee Turakhia
Rajshee Turakhia

Reputation: 274

you can set spacingLeft and spacingRight property.

chart: {
        type: 'bar',
        spacingLeft:0,
        spacingRight:0,
    },

you can check the example on below link:

http://jsfiddle.net/vpL0j2av/1/

Upvotes: 2

Sanath
Sanath

Reputation: 4886

rather than reducing the width, reduce the margin-Left

http://api.highcharts.com/highcharts#chart

EDIT: You can reduce spacingLeft and spacingRight http://api.highcharts.com/highcharts#chart.spacingLeft

Upvotes: 1

Related Questions