score:3

Accepted answer

when you render the charts use this:

/*********************************************************
* generate the example chart
*********************************************************/

var chart = new highcharts.chart({

    chart: {
        renderto: 'container'
    },

    title: {
        text: 'chart 1'
    },

    xaxis: {
        categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
    },
    series: [{
        type: 'arearange',
        data: testdata,
        fillcolor: {
            pattern: 'http://i.stack.imgur.com/dezhe.png',
            width: 10,
            height: 300 + math.round(testdata[0][0] / 100) * 100
        }
    }]

});

var chart2 = new highcharts.chart({

    chart: {
        renderto: 'container2'
    },

    title: {
        text: 'chart 2'
    },

    xaxis: {
        categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
    },
    series: [{
        type: 'arearange',
        data: testdata2,
        fillcolor: {
            pattern: 'http://i.stack.imgur.com/dezhe.png',
            width: 10,
            height: 300 +  math.round(testdata2[0][0] / 100) * 100
        }
    }]

});

it adds the y axis's starting point (math.round(testdata[0][0] / 100) * 100) to the height of the image.

(there is only a minor change to the code you supplied)

charts

the difference is kinda subtle

score:3

you can also try to update position of the image after chart is rendered. only limit is to know one point (for example 1st pixel on top of pattern should be for value 500). see example: http://jsfiddle.net/ywuqd/9/

first add reference for future update when creating pattern:

this.upgradegradients = image;

then in load use this:

        load: function() {
            var chart = this,
                image = chart.renderer.upgradegradients,
                top = chart.yaxis[0].topixels(500), //500 is the top of image - only for example value
                diff = chart.plottop + top;

            image.attr({y : diff});
        }

Related Query

More Query from same tag