Closed1

Rechartsで横向き積み上げ棒グラフを作る

m_03m_03

横向き積み上げ棒グラフ

const data = [
  {
    name: string,
    [labelName]: value, 
    ....
  }...
]
const dataLabel = 上記データの各オブジェクト内に配置しているlabelNameのみの配列を作成する
 <ResponsiveContainer height={350}>  
  <BarChart
          data={data}
   {/* layout 属性にverticalを指定して横向きにする */}
          layout="vertical"
        >
   {/* グラフにグリッドを入れる */}
          <CartesianGrid strokeDasharray="3 3" />
   {/* 横軸 */}
          <XAxis type="number" />
         {/* 縦軸 */}
          <YAxis
            dataKey="name"
            type="category"
          />
   {/* ツールチップ */}
          <Tooltip/>
         {/* 積み上げ棒グラフ部分 */}
          {dataLabel.map((label, index) => (
            <Bar
              key={label}
              maxBarSize={100}
              fill={グラフ色[index]}
              dataKey={label}
    {/* ここは積み上げるグラフがすべて共通のIDになっていれば積みあがるので、なんでもよい */}
              stackId="a"
            />
          ))}
   {/* 平均線的なものを表示したい場合はReferenceLineを使用 */}
          <ReferenceLine
            x={scenarioTrainingTimeAverage}
            stroke="red"
            strokeDasharray="3 3"
            label={{
              position: 'top',
              value: value,
              fontSize: 14,
              fill: '#333333',
            }}
            strokeWidth={2}
          />
        </BarChart>
      </ResponsiveContainer>
このスクラップは2023/09/02にクローズされました