棒グラフ内のテキストを含むハイチャート水平棒グラフ

Question

私はHighchartsを全く新しくしており、下の画像とまったく同じ水平棒グラフを設計する必要があります。

私の周りいじってみました、バーの内側4と2を表示するために管理してきました。しかし、最初のバーの上に「Completed」、2番目のバーの下に「To Action」というテキストを表示できません。私はまた棒の間のギャップを取り除きたいと思う。以下は私のコードです。

var chart = new Highcharts.Chart({ 
chart: { 
    renderTo:'container', 
    //marginLeft:120, 
    type:'bar' 
}, 
legend: { enabled: false}, 
colors:['#173c64'], 
xAxis: { 
    categories: ['4','2'], 
    labels: { 
     align:'left', 
     x:5, 
     style: { 
      fontSize: '4em', 
      color:'#fff' 
     } 
    }, 
    lineWidth: 0, 
    gridLineWidth: 0, 
    lineColor: 'transparent', 
    minorTickLength: 0, 
    tickLength: 0, 
    title: { 
      enabled: false 
    } 

}, 
yAxis: { 
    lineWidth: 0, 
    gridLineWidth: 0, 
    lineColor: 'transparent',  
    labels: { 
     enabled: false 
    }, 
    minorTickLength: 0, 
    tickLength: 0, 
    title: { 
      enabled: false 
    } 
}, 
title: { 
    margin:0, 
    useHTML: true, 
    text: "This Month", 
    style: {"color": "#333333", "fontSize": "1.5rem","fontWeight": "bold"} 
}, 
series:[{ 
    data:[{y: 20, color:'#0091dc'},{y: 17, color:'#173c64'}] 
}]  

}）;

Answer 1

はを完了ための字幕を追加しましたし、アクションにためフッターにカスタムラベルを追加し、棒の間のスペースを除去する。これは、あなたの条件に近くにあるチャート

に groupPadding: 0,pointPadding: 0,でplotOptionsを追加しました。ご存知のように、これは

var chart = new Highcharts.Chart({ 
 
    chart: { 
 
    renderTo: 'container', 
 
    //marginLeft:120, 
 
    type: 'bar', 
 
    events: { 
 
     load: function() { 
 
     var label = this.renderer.label("To Action") 
 
      .css({ 
 
      width: '100px', 
 
      fontSize: '1.5rem' 
 
      }) 
 
      .add(); 
 

 
     label.align(Highcharts.extend(label.getBBox(), { 
 
      align: 'left', 
 
      x: 0, // offset 
 
      verticalAlign: 'bottom', 
 
      y: -30 // offset 
 
     }), null, 'spacingBox'); 
 

 
     } 
 
    }, 
 
    marginBottom: 120 
 
    }, 
 
    legend: { 
 
    enabled: false 
 
    }, 
 
    colors: ['#173c64'], 
 
    xAxis: { 
 
    categories: ['4', '2'], 
 
    labels: { 
 
     align: 'left', 
 
     x: 5, 
 
     style: { 
 
     fontSize: '4em', 
 
     color: '#fff' 
 
     } 
 
    }, 
 
    lineWidth: 0, 
 
    gridLineWidth: 0, 
 
    lineColor: 'transparent', 
 
    minorTickLength: 0, 
 
    tickLength: 0, 
 
    title: { 
 
     enabled: false 
 
    } 
 

 
    }, 
 
    yAxis: { 
 
    lineWidth: 0, 
 
    gridLineWidth: 0, 
 
    lineColor: 'transparent', 
 
    labels: { 
 
     enabled: false 
 
    }, 
 
    minorTickLength: 0, 
 
    tickLength: 0, 
 
    title: { 
 
     enabled: false 
 
    } 
 
    }, 
 
    plotOptions: { 
 
    bar: { 
 
     stacking: "normal", 
 
     groupPadding: 0, //add here 
 
     pointPadding: 0, //add here 
 
    } 
 
    }, 
 
    title: { 
 
    margin: 0, 
 
    useHTML: true, 
 
    text: "This Month", 
 
    style: { 
 
     "color": "#333333", 
 
     "fontSize": "1.5rem", 
 
     "fontWeight": "bold" 
 
    } 
 
    }, 
 
    subtitle: { 
 
    align: 'left', 
 
    y: 40, //offset 
 
    useHTML: true, 
 
    text: 'Completed', 
 
    style: { 
 
     "color": "#333333", 
 
     "fontSize": "1.5rem" 
 
    } 
 
    }, 
 
    series: [{ 
 
    data: [{ 
 
     y: 20, 
 
     color: '#0091dc' 
 
    }, { 
 
     y: 17, 
 
     color: '#173c64' 
 
    }] 
 
    }] 
 
})

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>