Question
How to center the label of a bar chart?
Description
In a stacked bar chart, it is expected that each label will be centered.
Solution
Different chart libraries have different solutions. VChart provides label configuration options and supports various postion configurations.
Optional values are: ‘outside’、’top’、’bottom’、’left’、’right’、’inside’、’inside-top’、’inside-bottom’、’inside-right’·’inside-left’、’top-right’、’top-left’、’bottom-right’、’bottom-left’
Code example
import { createRoot } from “react-dom/client“;
const rootElement = document.getElementById(“root“);
const root = createRoot(rootElement);
import VChart from “@visactor/vchart“;
const App = () => {
useEffect(() => {
const spec = {
type: “bar“,
label: {
visible: true,
position: “inside“,
},
data: [
{
id: “barData“,
values: [
{ type: “Autocracies“, year: “1930“, value: 129 },
{ type: “Autocracies“, year: “1940“, value: 133 },
{ type: “Autocracies“, year: “1950“, value: 130 },
{ type: “Autocracies“, year: “1960“, value: 126 },
{ type: “Autocracies“, year: “1970“, value: 117 },
{ type: “Autocracies“, year: “1980“, value: 114 },
{ type: “Autocracies“, year: “1990“, value: 111 },
{ type: “Autocracies“, year: “2000“, value: 89 },
{ type: “Autocracies“, year: “2010“, value: 80 },
{ type: “Autocracies“, year: “2018“, value: 80 },
{ type: “Democracies“, year: “1930“, value: 22 },
{ type: “Democracies“, year: “1940“, value: 13 },
{ type: “Democracies“, year: “1950“, value: 25 },
{ type: “Democracies“, year: “1960“, value: 29 },
{ type: “Democracies“, year: “1970“, value: 38 },
{ type: “Democracies“, year: “1980“, value: 41 },
{ type: “Democracies“, year: “1990“, value: 57 },
{ type: “Democracies“, year: “2000“, value: 87 },
{ type: “Democracies“, year: “2010“, value: 98 },
{ type: “Democracies“, year: “2018“, value: 99 },
],
},
],
xField: [“year“, “type“],
yField: “value“,
seriesField: “type“,
legends: {
visible: true,
orient: “top“,
position: “start“,
},
};
const vchart = new VChart(spec, { dom: “chart“ });
vchart.renderSync();
return () => {
vchart.release();
};
}, []);
return <div id=“chart“></div>;
};
root.render(
<StrictMode>
<App />
</StrictMode>
);
Results show
Online Demo: https://codesandbox.io/p/sandbox/vchart-label-center-cz7wjm?file=%2Fsrc%2Findex.js%3A1%2C1-70%2C1
Related Documents
Label API: https://visactor.io/vchart/option/barChart#label
Github: https://github.com/VisActor/VChart