[英]change label position in react-chartjs-3
I'm unable to change the position of the label to bottom in react-chart.js3.我无法将 label 的 position 更改为 react-chart.js3 中的底部。 It's now displaying on the top of the chart.
它现在显示在图表的顶部。
import React, { useState, useEffect } from "react";
import { Doughnut, Line, Pie } from "react-chartjs-3";
export default function UserDashboard() {
const DoughData = {
labels: ["Red", "Green", "Yellow"],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
},
],
};
return (
<div>
<Doughnut data={DoughData} />
</div>
);
}
Those who looking for solution for react-chartjs-2
try this:那些为
react-chartjs-2
寻找解决方案的人试试这个:
const options = {
responsive: true,
plugins: {
legend: {
display: true,
position: "bottom"
},
},
};
Checking if height Property Is Not Set on Parent:检查父级是否未设置高度属性:
If the parent element has no height set then the sticky element won't have any area to stick to when scrolling.如果父元素没有设置高度,那么粘性元素在滚动时将没有任何区域可以粘附。 This happens because the sticky element is meant to stick/scroll within the height of a container.
发生这种情况是因为粘性元素旨在在容器的高度内粘附/滚动。 Checking if a Parent Element Is a Flexbox
检查父元素是否为 Flexbox
If sticky element's parent is a flexbox, there are two scenarios to check for:如果粘性元素的父元素是 flexbox,则有两种情况需要检查:
The sticky element has align-self: auto set (which is the default);粘性元素有 align-self: auto 设置(这是默认设置); The sticky element has align-self: stretch set.
粘性元素具有 align-self: stretch 集。 If the Sticky Element Has align-self: auto Set: In this case the value of align-self would compute to the parent's align-items value.
如果 Sticky 元素具有 align-self: auto 设置:在这种情况下,align-self 的值将计算为父级的 align-items 值。 So,
所以,
if the parent has align-items: normal (which is the default) or align-items: stretch set, then it means the height of the sticky element would stretch to fill the entire available space.如果父级设置了 align-items: normal(默认)或 align-items: stretch 集,则意味着粘性元素的高度将拉伸以填充整个可用空间。 This would leave no room for the sticky element to scroll within the parent.
这将没有空间让粘性元素在父元素中滚动。
If the Sticky Element Has align-self: stretch Set:如果 Sticky 元素有 align-self: stretch 设置:
In this case, the sticky element would stretch to the height of the parent, and would not have any area to scroll within.在这种情况下,粘性元素会拉伸到父元素的高度,并且没有任何区域可以滚动。
How to Make Sticky Element Scrollable Within a Flexbox: You could simply set the value of the align-self property to align-self: flex-start.如何在 Flexbox 中使粘性元素可滚动:您可以简单地将 align-self 属性的值设置为 align-self: flex-start。 This would put the sticky element at the start and won't stretch it.enter link description here
这会将粘性元素放在开头并且不会拉伸它。在此处输入链接描述
Pass options
props to the Doughnut
component.将
options
道具传递给Doughnut
组件。
import React from "react";
import { Doughnut } from "react-chartjs-3";
export default function UserDashboard() {
const DoughData = {
labels: ["Red", "Green", "Yellow"],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
}
]
};
const options = {
legend: {
display: true,
position: "bottom"
}
};
return (
<div>
<Doughnut data={DoughData} options={options} />
</div>
);
}
Working code - https://codesandbox.io/s/wandering-snowflake-b7tgd?file=/src/tickets.js工作代码 - https://codesandbox.io/s/wandering-snowflake-b7tgd?file=/src/tickets.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.