How can i display the two bars in each month section.

[zeeshanansari-danbertech]

I want to display completed booking and earning bars in each month. how can I display this chart bar?

[Abhinandan-Kushwaha]

Hi @zeeshanansari-danbertech 👋
Thanks for requesting this feature. It is available from versions 1.4.35 onwards. 🎉

To achieve the above chart, you can have a single data array, with alternate values set to secondary using the property isSecondary: true inside the data array objects. Then you can set spacing: 0 for alternate indices (starting from 0,2,4...). Also, you can set the frontColor inside each data array objects.

the right side Y-axis can be rendered using the secondaryYAxis prop. For customising the right side Y-axis, see secondaryYAxis in the props table

Here's an example-

onst data: barDataItem[] = [
  {value: 26, spacing: 0},
  {value: 600, frontColor: '#655FD5', isSecondary: true},

  {value: 26, spacing: 0},
  {value: 600, frontColor: '#655FD5', isSecondary: true},

  {value: 26, spacing: 0},
  {value: 600, frontColor: '#655FD5', isSecondary: true},

  {value: 100, spacing: 0},
  {value: 500, frontColor: '#655FD5', isSecondary: true},

  {value: 24, spacing: 0},
  {value: 800, frontColor: '#655FD5', isSecondary: true},

  {value: 23, spacing: 0},
  {value: 300, frontColor: '#655FD5', isSecondary: true},

  {value: 26, spacing: 0},
  {value: 600, frontColor: '#655FD5', isSecondary: true},

  {value: 26, spacing: 0},
  {value: 600, frontColor: '#655FD5', isSecondary: true},

  {value: 26, spacing: 0},
  {value: 600, frontColor: '#655FD5', isSecondary: true},
];

return (
  <BarChart
    data={data}
    noOfSections={7}
    stepValue={20}
    secondaryYAxis={{maxValue: 1400}} // for right side Y-axis you can customize its label colors & other properties 
    frontColor={'#5ABF2A'}
    barWidth={10}
    spacing={8}
  />
);

The output of the above code is-

Please use the latest version of the library.