Closed1
Rechartsで横向き積み上げ棒グラフを作る
横向き積み上げ棒グラフ
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にクローズされました