CODEWITHSUNDEEP
javascriptjqueryhighcharts
wergeld
wergeld

Reputation: 14462

Increase Height Of Chart On Export

Using latest highcharts (3.0.7). We are trying to add text to the top of the chart on export. to do this I need to increase the spacingTop so that we do not overwrite any chart elements. This then causes the chart to become less high by that amount of spacingTop for a the same chart height. How can I get the current chart height and add X amount to it on export? I have tried:

exporting: {
    sourceWidth: 400,
    //sourceHeight: this.chartHeight,
    //sourceHeight: this.chartHeight + 200,
    scale: 1, //(default)
    chartOptions: {
        subtitle: null,
        height: this.chartHeight + 200
    }
}

This seems to be ignored. See this fiddle. This was just a test to see if I could do this at all. Seems like it should be straight forward. If I uncomment out the sourceHeight it still does not do what I expect - the chart is still 400px high. So it seems that this.chartHeight does not contain anything.

In the end this height change code is going to exist in a function we call:

chartMainLoc.exportChart({
    type: 'image/jpeg',
    sourceHeight: this.chartHeight + 200,
    sourceWidth: this.chartWidth,
    scale: 1
}, {
    chart: {
        events: {
            load: function () {
                this.renderer.text('Occupational Employment and Wage Rates (OES) for Multiple Occupations in Louisiana in 2012<br /> The graph below shows the annual occupational employment and annual wage data for Multiple Occupations in Louisiana in 2012.<br /> ', 5, 15).attr({
                    rotation: 0
                }).css({
                    color: '#4572A7',
                    fontSize: '10px',
                    fontStyle: 'italic',
                    width: this.chartWidth
                }).add();
                this.renderer.rect(5, 5, this.chartWidth - 10, 60, 5).attr({
                    'stroke-width': 2,
                    stroke: 'black',
                    zIndex: 2
                }).add();
            }
        },
        spacingTop: 200,
        shadow: false
    }
})

Since I do not know the chart's height or width beforehand I have to get this value somehow.

Upvotes: 0

Views: 704

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You need to set chart optiosn with objects (chart / series etc) like in the example http://jsfiddle.net/GQUDJ/2/

Upvotes: 1

Related Questions