I'm creating a Horizontal Bar chart using @Nivo Responsive bar, in the documentation(https://nivo.rocks/bar), it's written that indexBy(string or function, id by default) is a unique key used to index the data and have noticed that this value is showing always on x-axis ticks. But I need to show the values(numbers that can be unique/duplicate) in the y-axis ticks, not the keys like shown in the image attached. I am using "@nivo/bar": "^0.52.0"
If you want to try it out, CodeSandbox link: https://codesandbox.io/s/nivobar-axis-legend-text-color-443-3l129?file=/src/index.js
Here is the code I have written so far:
import React from "react";
import { render } from "react-dom";
import { ResponsiveBar } from "@nivo/bar";
let data = [
{
id: "One Plus",
label: "Apple",
value: 350
},
{
id: "Samsung",
label: "Samsung",
value: 280
},
{
id: "Nokia C",
label: "Nokia",
value: 20
}
];
data = data.sort((a, b) => a.value - b.value);
const theme = {
labels: { text: { fontSize: 11 } },
axis: {
ticks: { text: { fontSize: 11, fill: "grey" } }
}
};
const App = () => (
<div
style={{ width: "90%", height: "15em", float: "left", overflowY: "auto" }}
>
<ResponsiveBar
height={150}
layout="horizontal"
margin={{
top: 5,
right: 5,
bottom: 5,
left: 35
}}
data={data}
indexBy={_index => _index.value + ""}
keys={["value"]}
colors={["#cce4f2"]}
colorBy="indexValue"
groupMode="grouped"
enableGridX={false}
enableGridY={false}
borderRadius={1}
label={_label => _label.data.id}
padding={0.2}
labelFormat={d => <tspan x={40}>{d}</tspan>}
axisLeft={{
tickSize: 0,
tickPadding: 5,
tickRotation: 0
}}
axisBottom={null}
labelTextColor="black"
motionStiffness={170}
motionDamping={26}
theme={theme}
/>
</div>
);
render(<App />, document.getElementById("root"));
As you can notice above, I have used indexBy as indexBy={_index => _index.value + ""} to convert value from number to string, but it failed when the values will be duplicate.
