Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style individual bars #216

Closed
1 of 4 tasks
markov00 opened this issue May 22, 2019 · 1 comment · Fixed by elastic/kibana#43516
Closed
1 of 4 tasks

Style individual bars #216

markov00 opened this issue May 22, 2019 · 1 comment · Fixed by elastic/kibana#43516
Assignees
Labels
:chart Chart element related issue enhancement New feature or request :styling Styling related issue

Comments

@markov00
Copy link
Member

markov00 commented May 22, 2019

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
@markov00 markov00 added enhancement New feature or request :chart Chart element related issue :styling Styling related issue labels May 22, 2019
@markov00
Copy link
Member Author

Slightly related: at GAH, the APM team ask if we can enable/disable hover on elements depending on specific values, seems very related and can be done in a similar way

@nickofthyme nickofthyme self-assigned this Jun 5, 2019
nickofthyme added a commit to nickofthyme/elastic-charts that referenced this issue Jun 12, 2019
nickofthyme added a commit to nickofthyme/elastic-charts that referenced this issue Jul 2, 2019
Allows for grouping of datums within a series to enable global groups. Allow custom colors of
groupings.

BREAKING CHANGE: Color accesors is replaced with groupAccessors. DataSeriesColorsValues renamed to
DataSeriesValues, colorValues renamed to accessors and added group.

elastic#216
nickofthyme added a commit to nickofthyme/elastic-charts that referenced this issue Jul 24, 2019
Allow user to override colors of given datum based on accessor function

elastic#216
nickofthyme added a commit that referenced this issue Aug 5, 2019
Allow user to override colors/styles of given BarChart datum based on accessor function prop called StyleAccessor.

BREAKING CHANGE: colorAccessors removed from YBasicSeriesSpec (aka for all series) which had acted similarly to a split accessor.

#216
markov00 pushed a commit that referenced this issue Aug 5, 2019
# [9.0.0](v8.1.8...v9.0.0) (2019-08-05)

### Features

* **bar_chart:** color/style override accessor ([#271](#271)) ([7634f5c](7634f5c)), closes [#216](#216)

### BREAKING CHANGES

* **bar_chart:** colorAccessors removed from YBasicSeriesSpec (aka for all series) which had acted similarly to a split accessor.
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
# [9.0.0](elastic/elastic-charts@v8.1.8...v9.0.0) (2019-08-05)

### Features

* **bar_chart:** color/style override accessor ([opensearch-project#271](elastic/elastic-charts#271)) ([764f127](elastic/elastic-charts@764f127)), closes [opensearch-project#216](elastic/elastic-charts#216)

### BREAKING CHANGES

* **bar_chart:** colorAccessors removed from YBasicSeriesSpec (aka for all series) which had acted similarly to a split accessor.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:chart Chart element related issue enhancement New feature or request :styling Styling related issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants