0부터 시작하는 누적 막대 차트-ChartJS React

간단한 가로 막대 차트를 만들고 있습니다. 각 레이블에는 두 개의 데이터가 있습니다. 하나는 중복이 있고 다른 하나는 중복이 없습니다. 두 막대가 모두 0부터 시작하는 가로 누적 막대를 만들고 싶습니다.

누적 막대를 만들 수 있었지만 두 번째 막대는 첫 번째 막대의 끝에서 시작됩니다. 0부터 시작하고 싶습니다.

내가 가진 것

예 : 뱅킹에는 두 개의 데이터가 있습니다. 하나는 가치가있는 뱅킹 카테고리입니다 30. 다른 하나는 중복 된 은행입니다 43. 막대가 함께 추가됩니다 30+43. 그러나 저는 둘 다 0부터 시작 13하여 30 이후에 (43-30) 만 나타나기를 원합니다. 따라서 합계는 43 + 30이 아니라 43입니다.

What I would like to have

My component

function CategoriesCard({coming_props}){
const data = {
  labels: [
      'Email',
      'DoB',
      'Credit Card',
      'Passport Number',
      'Driver Licence',
      'National Insurance',
      'Banking',
      'Phone',
      'Address',
      'Postcode',
      'Social Media',
      'Organisation',
      'Location',
      'Nationality / belief',
      'Financial',
      'Ethnicity'
  ],
  datasets: [
      {
          label: 'Categories',
          stack: 'stack1',
          backgroundColor: '#04A9F5',
          borderColor: '#04A9F5',
          borderWidth: 1,
          hoverBackgroundColor: '#04A9F5',
          hoverBorderColor: '#04A9F5',
          data: [25, 21, 25, 25, 25, 28, 30,22, 21, 25, 25, 25, 28, 30,30,29],
    },
    {
        label: 'With duplicates',
        stack: 'stack1',
        backgroundColor: '#A8C6F5',
        borderColor: '#A8C6F5',
        borderWidth: 1,
        hoverBackgroundColor: '#A8C6F5',
        hoverBorderColor: '#A8C6F5',
        data: [34, 43, 12, 32, 42, 43, 43,22, 21, 25, 25, 25, 28, 30, 30, 29],
    }
  ],
};

const options = {
    maintainAspectRatio: false,
    scales: {
            xAxes: [{
                ticks: {
                    min: 0,
                    beginAtZero: true
                }
            }]
    }
}



return (
  <div style={{margin: '2%', height:'100%'}}>
    <Paper style={{height: '100%'}}>
      <h3>CATEGORIES</h3>
        <div style={{height: '90%', width:'90%'}}>
            <HorizontalBar
            data={data}
            options={options}
            height={500}
            width={200}
            />
        </div>
    </Paper>
  </div>
  )
}

export default CategoriesCard

What I did

I calculated the difference between the two data array (categories and with duplicates) and assigned it to my second data.

Example:

let data_categories = [25, 21, 25]
let data_duplicates = [34, 43, 35]

let final_data = [(34-35), (43-21), (35-25)]

It does work to fix the bar dimensions, but if i hover on it, it display the difference not the initial real number.