Проблема перезарядки с промежутками между барами - PullRequest
Новая
       12

Проблема перезарядки с промежутками между барами

3 голосов
/ 18 марта 2019

Я использую BarChart из библиотеки Recharts , однако я сталкиваюсь с проблемой при добавлении пробела между столбцами. Я пытался использовать атрибут barGap={20} barCategoryGap={20}, однако он не работает. 

  <ResponsiveContainer width="100%" height={230}>
  <BarChart layout="vertical" width="100%" height={600} data={data} barGap={100} barCategoryGap={-20}
        margin={{top: 20, right: 20, bottom: 20, left: 20}}>
      <CartesianGrid stroke='#f5f5f5'/>
      <XAxis interval={0} type="number"/>
      <YAxis width={180} dx={-10} interval={0} dataKey="name" type="category"/>
      <Tooltip cursor={{fill: '#fff'}}/>
      <Legend/>

      <Bar dataKey='pv' barSize={18} fill='#f19135' radius={[0,20,20,0]} background={{fill: "#FFF"}}/>
   </BarChart>
   </ResponsiveContainer>

1 Ответ

1 голос
/ 18 марта 2019

Это не работает для вас, потому что вы указали barSize в вашем <Bar>.

Ширина или высота каждого бара. Если barSize не указан, размер бара будет рассчитываться по barCategoryGap, barGap и количеству групп баров.

Если вы удалите barSize, вы сможете изменить разрыв между вашими барами с помощью свойства barCategoryGap. Либо с этим barCategoryGap="10%" (в процентах), либо с этим barCategoryGap={10} (в пикселях) синтаксисом

JSFiddle

...