你是对的您必须编辑的属性为barPercentage。
但是，错误可能来自您编辑值的位置。
如您在条形图选项中所见：

• 名称 *：条形图百分比

• • 类型 *：数字
• • 默认值 *：0.9
• • 产品说明 ：百分比（0-1）每个条形图的可用宽度应在类别百分比范围内。1.0将采用整个类别宽度，并将条形图放在彼此相邻的位置。
    该属性实际上存储在scales.xAxes（“ xAxes的选项 *”表）中。
    因此，您只需按以下方式编辑图表：

var options = {
    scales: {
        xAxes: [{
            barPercentage: 0.4
        }]
    }
}

下面是一个完整的工作示例，其中条形图具有自定义宽度（0.2）：
第一个

更新（Chart.js版本2.2.0以上）

如Release Version 2.2.0 - Candidate 2中所述：

增强

• 现在可以手动配置条形图中条形的粗细。在正确的轴上使用新的barThickness选项来设置条形的粗细。
• And so on ...

对于版本2.8+（显然早在2.2），现在有一些很好的控制条厚度，最大厚度等。
根据Chart.js文档，您可以按如下方式设置它们：

{
    type: 'bar', // or 'horizontalBar'
    data: ...,
    options: {
        scales: {
            xAxes: [{
                barThickness: 6,  // number (pixels) or 'flex'
                maxBarThickness: 8 // number (pixels)
            }]
        }
    }
}

自v2.7.2起，可通过以下方式实现：

scales: {
  xAxes: [{
    maxBarThickness: 100,
  }],
}

根据上述答案
这是使用react chartjs2的完整条形图。

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
   LinearScale,
   BarElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
    plugins: {
    legend: {
      position: 'top',   // lable position left/right/top/bottom
      labels: {
        boxWidth: 0,     // lable box size
      }
    },
  },
  elements: {
    point: {
      radius: 1
    }
  },
  scales: {
    x: {
      display: false,        // show/ hide x-axis
      grid: {
        display: false      // show/hide grid line in x-axis
      },
    },
    y: {
      display: false,      // same as x-axis
      grid: {
        display: false
      }
    }
  }
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

export const data = {
  labels,
  datasets: [
    {
      label: 'datasets',            // label text
      data: [100, 300, 500, 700],      
      backgroundColor: '#7b62ff',   // bar / column color
      barThickness: 6,             // <<<<<<<<<<<<   bar / column size  
    },
  ],
};

export default function ResumesGraph() {
  return (
    <div>
      <Bar
        data={data}
        options={options}
        width={'500px'}
        height={'180px'}
      />
    </div>
  );
}