javascript - real - Highcharts: Barra dentro de una barra apilada

highcharts more js

Question

Quiero crear un gráfico con una barra dentro de una barra apilada como se ve en la imagen de abajo. Gráfico http://i61.tinypic.com/317axx4.jpg

Logré poner la columna dentro de la columna, pero no puedo hacer que funcione para la barra. ¿Cómo puedo poner la barra dentro de la barra apilada?

Mi código - JsFiddle

var chart = new Highcharts.Chart({
    chart: {
        renderTo:''container'',
    },
    title: {
        text: ''Test %''
    },
    xAxis: {
        categories: [''2014'', ''2013'', ''2012'', ''2011'']
    },
    yAxis: {
        opposite: true,
        labels: {
            format: ''{value}%'',
        },
    },
    plotOptions: {
        series: {
            stacking: ''normal''
        },
        column: {
            stacking: ''percent''
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: ''red'',
        type: ''bar'',
        data: [70, 70, 70, 70],
        color: ''rgba(253, 155, 155, 1)'',
        pointPadding: 0.1,
        pointPlacement: -0.2,
        stack: ''bar''
    }, {
        name: ''yellow'',
        type: ''bar'',
        data: [5, 5, 5, 5],
        color: ''rgba(255, 255, 153, 1)'',
        pointPadding: 0.1,
        pointPlacement: -0.2,
        stack: ''bar''
    }, {
        name: ''green'',
        type: ''bar'',
        data: [25, 25, 25, 25],
        color: ''rgba(204, 255, 153, 1)'',
        pointPadding: 0.1,
        pointPlacement: -0.2,
        stack: ''bar''
    }, {
        name: ''Value'',
        type: ''bar'',
        data: [35, 30, 25, 20],
        color: ''rgba(126,86,134,.9)'',
        pointPadding: 0.35,
        pointPlacement: -0.2,
        dataLabels: {
            enabled: true,
            format: ''{y}%''
        },
    }]
});

Cualquier ayuda apreciada.

Answer 1

Parece que estás haciendo un gráfico de bala.

Tengo ejemplos de esto aquí:

• http://jsfiddle.net/jlbriggs/UGs2E/17/

.

plotOptions:{
        bar:{
            grouping: false,
            shadow:false,
            borderWidth:0,
            pointPadding:.25,
            groupPadding:0
        },
        scatter:{
            marker:{
                symbol:''line'',
                lineWidth:3,
                radius:9,
                lineColor:''#333''
            }
        }
    }

También utiliza una función para extender el objeto marcador para la línea objetivo, en una serie de dispersión:

Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
    return [''M'',x ,y + width / 2,''L'',x+height,y + width / 2];
};

Answer 2

Puede establecer la agrupación en falso, por lo que todas las pilas se colocarán una encima de la otra, se superponen entre sí.

Ejemplo: http://jsfiddle.net/zs6juetp/2/

plotOptions: {
    series: {
        grouping: false
        ...

Referencia de API: plotOptions.bar.grouping