chart.js - 横棒グラフjsから両側にラベルを作る方法

Question

次のように両側に二重水平バーのサイド ラベルを作成したい: pic 1 , pic 2

誰かがそれを行う方法をidkするのを手伝ってもらえますか、私はreactとchartjsが初めてです

この投稿の続き:複数の横棒チャートを作成する方法

ここに私がコードするものがあります:

• このデータ：

グラフのデータ

export const dataPasienKeluarMasuk = {
  type: 'bar',
  labels: [
    [0, 1, 2, 3,4],    // expect output 0 - 4
    [5, 6, 7, 8, 9],   // expect output 5 - 9
    [10, 14],          // ext..
    [15, 19],
    [20, 24],
    [25, 29],
    [30, 34],
  ],
  datasets: [
    {
      label: 'Pasien Masuk',
      xAxisID: 'A',
      data: [100, 90, 80, 70, 60],
      backgroundColor: 'red',
    },
    {
      label: 'Pasien Keluar',
      xAxisID: 'A',
      data: [-100, -90, -80, -70, -60],
      backgroundColor: 'blue',
    },
  ],
}

• これはチャートです：

複数の y 横棒

import { HorizontalBar } from 'react-chartjs-2'
import { dataPasienKeluarMasuk } from ...blabla

<HorizontalBar
  data={dataPasienKeluarMasuk}
  height={227}
  options={{
    responsive: true,
    title: {
      display: true,
      text: 'Data Pasien Keluar Masuk',
      fontSize: 20,
    },
    legend: {
      display: true,
      position: 'bottom',
    },
    scales: {
      xAxes: [
        {
          stacked: true,
          scaleLabel: {
            display: true,
            labelString: 'Jumlah Pasien (orang)',
          },
          ticks: {
            // Include a dollar sign in the ticks
            callback: (value) => Math.abs(value),
          },
        },
      ],
      yAxes: [
        {
          stacked: true,
          ticks: {
            display: true,
            reverse: true,
          },
        },
      ],
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          let ds = data.datasets[tooltipItem.datasetIndex]
          return (
            ds.label + ': ' + Math.abs(ds.data[tooltipItem.index])
          )
        },
      },
    },
  }}
/>