我有一个堆叠条形图。这是一个条形图的例子:
我需要的是为所有的酒吧做一个边界,像这样:
我尝试向数据集添加边框,但在这种情况下,我为条形图的每个部分都设置了单独的边框:
所以,问题是,我如何为酒吧制作统一的边界?
以下是我的数据集:
const datasets = useMemo(() => [
{
type: 'line' as ChartType,
label: MULTI_BAR_CHART_LINE_NAME,
data: data.map(item => item.firstValue),
fill: false,
borderColor: `${theme`colors.advisor-red-300`}`,
tension: 0.2,
pointRadius: 0,
hoverPointRadius: 0,
},
{
type: 'bar' as ChartType,
label: chartLegendLabels.firstLabel,
data: data.map(item => item.firstValue),
backgroundColor: `${theme`colors.advisor-red-300`}`,
stack: 'standing costs',
barPercentage: 0.3,
},
{
type: 'bar' as ChartType,
label: chartLegendLabels.secondLabel,
data: data.map(item => item.secondValue),
backgroundColor: `${theme`colors.advisor-yellow-200`}`,
stack: 'standing costs',
barPercentage: 0.3,
},
{
type: 'bar' as ChartType,
label: chartLegendLabels.thirdLabel,
data: data.map(item => item.thirdValue),
backgroundColor: `${theme`colors.advisor-tissue-graph-border-sufficient`}`,
stack: 'standing costs',
barPercentage: 0.3,
hoverBorderRadius: 8,
},
], [data, chartLegendLabels]);
1条答案
按热度按时间hvvq6cgz1#
I got it))
所有我必须做的是添加另一个酒吧与透明的背景和边界悬停