Skip to content

Style individual bars #216

@markov00

Description

@markov00

Is your feature request related to a problem? Please describe.
Some bar chart requires different colors for different bars. Is not a real good practice but in special case is permitted, specially when you want to visualize different categories with the same X axis. The current implementation only allows 1 color per series. Multiple, non stacked series are combined together but it will results in a clustered set of elements that can leave some empty space when an x value is not present on each series.

Describe the solution you'd like
I'd like to specify a color accessor or a color function for each bar series, that will be used to apply the color of a single or multiple bars.

  • Group bars in any bar series given a property accessor or function accessor.
  • Customize color of groups
  • Groups should show in the legend and hide and show independently from the parent series.

Describe alternatives you've considered
There is currently a workaround that work only in specific situation:

<Chart>
  <Settings debug={false} rotation={90} />
  <Axis id={getAxisId('categories')} title="" position={Position.Left} />
  <Axis id={getAxisId('count')} title="count" position={Position.Bottom} />
  <BarSeries
    id={getSpecId('a')}
    name={'Series A'}
    xScaleType={ScaleType.Ordinal}
    yScaleType={ScaleType.Linear}
    xAccessor="x"
    yAccessors={['y']}
    stackAccessors={['x']}
    data={[{ x: 'a', y: 1 }]}
  />
  <BarSeries
    id={getSpecId('b')}
    name={'Series B'}
    xScaleType={ScaleType.Ordinal}
    yScaleType={ScaleType.Linear}
    xAccessor="x"
    yAccessors={['y']}
    stackAccessors={['x']}
    data={[{ x: 'b', y: 5 }]}
  />
</Chart>

Screenshot 2019-05-22 at 15 55 28

Additional context

That type of chart is currently used in SIEM KPIs

Screenshot 2019-05-22 at 21 55 01

Kibana Cross Issues
n/a

Checklist

  • this request is checked against already exist requests
  • [ ] every related Kibana issue is listed under Kibana Cross Issues list
  • [ ] kibana cross issue tag is associated to the issue if any kibana cross issue is present

Metadata

Metadata

Assignees

Labels

:chartChart element related issue:stylingStyling related issueenhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions