Когда из yAxis есть сюжетная полоса и сюжетная линия, как установить конкретную ширину для сюжетной полосы только в старшей диаграмме

Question

Линия графика должна распространяться по графику, но полоса графика должна иметь меньшую ширину.

1) Первоначально без заданной ширины.

2) Когда ширина оси y установлена ​​на 20

3) Я хочу что-то подобное, когда существует и сюжетная полоса, и сюжетная линия co

это скрипка код ссылки на то, что я пробовал до сих пор. Может кто-нибудь, пожалуйста, помогите мне большое спасибо заранее.

https://jsfiddle.net/mncfy80p/

  chart: {
      type: "column",
      height: 205,
      plotBackgroundColor: "#D3D3D3",
      width:250,
    },
    title : {
        text:''
    },
    credits: {
      enabled: false
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          inside: true
        },
        pointPadding: 0
      }
    },
    xAxis: {
        visible:false,       
    },

    yAxis: {
        title: {
            text: ''
        }, 
      min : 0,
        max : 100,
        tickInterval : 10,
        gridLineWidth: 0,
      plotLines: [{
            value: 70,
            color: 'black',
            dashStyle: "Solid",
            width: 4,
            zIndex: 5,
            label: {
              text: 39,
              align: "right",
              x: 2,
              y: -5,
              style: {
                color: 'black',
                fontWeight: "bold",
                fontSize: "18px",
              }
            }             
      }],
      plotBands: [
    {
        color: 'rgb(204,0,0)',
        from: 0,
        to: 30.99,
        zIndex: 3,
    },
    {
        color: 'rgb(226,113,113)',
        from: 31,
        to: 44.99,
        zIndex: 3,
    },
    {
        color: 'rgb(247,209,34)',
        from: 45,
        to: 54.99,
        zIndex: 3,
    },
    {
        color: 'rgb(136,207,136)',
        from: 55,
        to: 68.99,
        zIndex: 3,
    },
    {
        color: 'rgb(68,180,68)',
        from: 69,
        to: 87.99,
        zIndex: 3,
    },
    {
        color: 'rgb(0,153,0)',
        from: 88,
        to: 100,
        zIndex: 3,
    }
],
    },
    series: [{   
            dataLabels: {
            color: "white",
            verticalAlign: "bottom",
            crop: false,
            style: {
              fontWeight: "Normal"
            }
        },
        data: [{
            y: 85,
            color:'red',
            dataLabels: {
                formatter(){
                    return '<span style="font-size:11px;">A</span>';
                },
                y:-20
            }
        }, {
            y: 72,
            color:'green',
            dataLabels:{
              formatter(){
                return '<span style="font-size:11px;">B</span>';
              },
              y:-15
            }
        }, {
            y: 83,
            color:'blue',
            dataLabels:{                
              formatter(){
                return '<span style="font-size:11px;">C</span>';
              },
              y:-15
            }
        }],
        showInLegend: false
    }]

});

Answer 1

Самое простое решение - создать еще одну ось Y и переместить в нее полосы графика:

yAxis: [{
  ...,
  plotLines: [...],
}, {
  ...,
  plotBands: [...]
}]

---

Демонстрационная версия: https://jsfiddle.net/BlackLabel/agq6ebjd/

Справочник по API: https://api.highcharts.com/highcharts/yAxis