I want to change the position and style of the label in the React chart

Question

I am using react-chartjs-2 . I want to display the position of the label below the graph. Also, the color of the label is currently square, but I would like to change it to a round shape. I specified option and position: bottom, but the position of the label did not change.

import "./styles.css";
import React from "react";
import { Bar } from "react-chartjs-2";

const data = [
  {
    label: "a",
    data: [56, 23, 55, 56, 57]
  },
  {
    label: "b",
    data: [22, 17, 32, 47, 62]
  },
  {
    label: "c",
    data: [46, 73, 25, 76, 27]
  }
];

const App = () => {
  const CHART_COLORS = ["#e35b2c", "#e77235", "#eb8a40"];

  const list = data.map((d, index) => {
    return {
      label: d.label,
      backgroundColor: CHART_COLORS[index],
      data: d.data,
      stack: 1
    };
  });

  const options = {
    legend: {
      position: "bottom"
    }
  };

  return (
    <>
      <div className="App">
        <Bar
          data={{
            labels: ["block1", "block2", "block3"],
            datasets: list
          }}
          width={100}
          height={50}
          options={options}
        />
      </div>
    </>
  );
};

export default App;

Answer 1

Legend option is changed in latest version of chartjs to,

Namespace: options.plugins.legend

    plugins: {
      legend: {
        position: "bottom",
        labels: {
          usePointStyle: true //for style circle
        }
      }
    }
  };

You can check working demo here, https://codesandbox.io/s/react-chartjs-legend-option-prbgb

Reference: https://www.chartjs.org/docs/latest/configuration/legend.html