设置自定义图像从底部到顶部条形图的内部条形（使用高图）？

Question

So I have added custom image inside bars of bar graph (chart library highcharts). But the images are filled from top to bottom so the image at the bottom is cut but the x-axis (image attached below).

bar graph with custom image

Code I have written till now

var redrawEnabled = true,
        ctr = 0;
        Highcharts.chart('container', {
            chart: {
                type: 'column',
                events: {
                    load: function(){
                        if(this.options.chart.type == 'column'){
                            this.xAxis[0].update({
                            reversed: false
                        });
                        }
                    },
                render: function() {
                    if (redrawEnabled) {
                        redrawEnabled = false;
                        var chart = this,
                            renderer = chart.renderer;
                            
                            chart.series[0].points.forEach(function(p) {
                            
                            var widthRatio = p.shapeArgs.width / p.shapeArgs.height
                            id = 'pattern-' + p.index + '-' + ctr;

                            var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
                            width: 1,
                            height: widthRatio,
                            id: id,
                            patternContentUnits: 'objectBoundingBox'
                            });
                            renderer.image('coin6.png', 0, 0, 1, widthRatio).attr({}).add(pattern);

                            p.update({
                            color: 'url(#' + id + ')'
                            }, false);
                        });

                        ctr++;
                        chart.redraw();
                        redrawEnabled = true;
                    }
                }
            },

            },
            title: {
                text: null
            },
            legend:{ enabled:false },
            
            xAxis: {
                labels: {
                style: {
                        color: 'red',
                        fontSize:'10px'
                    }
                },
                categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
                ],
                crosshair: false,
            },
            yAxis: {
                min: 0,
                tickLength: 0,
                visible: false,
            },
            plotOptions: {
                bar: {
                    stacking: 'normal',
                },
                
            },
            series: [{
                pointWidth: 30,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 144.0, 176.0, 135.6, 148.5,]
            }]
            });

1st:- So I want start the image from the bottom so that it looks similar at bottom. so I want the image pattern flow from bottom to top. 2nd:- Can I apply padding and margin to the image pattern so that I can stack the coin images properly

I want to achieve the stack of coin as image attached. final result I want to achieve

Answer 1

You can use the xAxis.offset feature to increase this space.

   xAxis: {
     labels: {
       style: {
         color: 'red',
         fontSize: '10px'
       }
     },
         offset: 50,
     categories: [
       'Jan',
       'Feb',
       'Mar',
       'Apr',
       'May',
       'Jun',
       'Jul',
       'Aug',
       'Sep',
       'Oct',
       'Nov',
       'Dec'
     ],
     crosshair: false,
   },

Demo: https://jsfiddle.net/BlackLabel/0wqnbtdz/

API: https://api.highcharts.com/highcharts/xAxis.offset