Nivo Responsive Horizontal Bar - Numeric values are not showing in y-axis ticks

4.1k Views Asked by At

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.

Any tips or advice would be greatly appreciated. Required BarChart

0

There are 0 best solutions below