Bar Chart, Column Chart, nice or/and domain use cases (React & Vue)

[yassinedorbozgithub]

The main goal of this discussion is to cover all the combinaison of domain, nice uses to offer the greatest compatibilty possible.

First of all let's suppose that :

• The initial inputed data for the examples is :

[
  {
    value: 9,
    name: 'Alpha',
    id: '1',
    v: 2,
  },
  {
    value: 45,
    name: 'Beta',
    id: '2',
    v: 5,
  },
  {
    value: 29,
    name: 'Gamma',
    id: '3',
    v: 10,
  },
  {
    value: 30,
    name: 'Delta',
    id: '4',
    v: 4,
  },
  {
    value: 50,
    name: 'Epsilon',
    id: '5',
    v: 8,
  },
]

I - Bar Chart :

1. Definition configuration :

definition: {
            direction: Direction.HORIZONTAL,
            domainKey: xAxis.domainKey,
            nice: 2, // set it from the storybook
            reverse: isRTL,
            //domain: [9, 50], // automatically calculated : 9 is the min Value and 50 is the greatest value
          },

2. Output view :

3. Issue :
We get this result when we restrict bars to represent Gamma, Detla only :

definition: {
            direction: Direction.HORIZONTAL,
            domainKey: xAxis.domainKey,
            nice: 2, // set it from the storybook
            reverse: isRTL,
            //domain: [29, 30], // automatically calculated : 29 is the min value and 30 is the greatest value
            //tickCount: 10, // automatically set it with a default value 10
          },

II - Column Chart :
1. Definition configuration :

definition: {
            direction: Direction.VERTICAL,
            domainKey: yAxis.domainKey,
            nice: 2, // set it from the storybook
            //tickCount: 10, // automatically set it with a default value 10
            //domain: [9, 50], // automatically calculated : 9 is the min value and 50 is the greatest value
          },

2. Output view :

3. Issue :
We get this result when we restrict columns to represent Gamma, Detla only :

definition: {
            direction: Direction.VERTICAL,
            domainKey: yAxis.domainKey,
            nice: 2, // set it from the storybook
            //tickCount: 10, // automatically set it with a default value 10
            //domain: [29, 30], // automatically calculated : 29 is the min value and 30 is the greatest value
          },

Any contributions, any idea is welcome
Your contributions will be useful to provide the best possible user experience

[marrouchi]

@yassinedorbozgithub Like you already suggested, let's set for the bar/column chart "0" as the min value by default, but also offer the ability for the developer to choose using the axis config prop :

1. Set a domain
2. Let the domain be automatically computed from the domainKey
3. By default the min value would be zero
4. Add padding