Add a story with a high density chart (with points or bars smaller than 1 or 2 px) to see how it works on that case.

Is your feature request related to a problem? Please describe.
Add click interaction on legend items.
Ideally used to hide/show a series.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Kibana Cross Issues
elastic/kibana#21084

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

Below, padding between bottom axis title and ticks labels should match left axis

Stack monitoring team will use the new charts.
They use mainly multi-line charts with few line series (~4 to 5 series max from a first check).

Feature parity:

• Merge interaction on multiple type/series charts: crosshair (issue #80)
• Add annotation lines (like current time marker) (issue #104)
• Externally controlled/synched annotations/crosshair (issue #83)
• Hovered value appears on legend item

Kibana Cross Issues

• elastic/kibana#29010
• elastic/kibana#28471
• elastic/kibana#27786
• elastic/kibana#25525
• elastic/kibana#23839
• elastic/kibana#20184
• elastic/kibana#18310
• elastic/kibana#18247
• elastic/kibana#18228
• elastic/kibana#18160

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

Replaced by the DataVis plan project. Please refer to that project for an updated roadmap

The version numbers in this issue reflect version numbers of Kibana releases, at which we're planning to have the functionality implemented in Elastic charts. They are not reflecting actual Elastic Chart version numbers.

Kibana 7.6

• DONE Pie chart #84
• DONE Basic export as PNG function #82
• DONE Moving from MobX to Redux #281
• PAUSED Add configuration validation #85
• Accessibility #300 moved to 7.9

Kibana 7.7

• DONE add pie chart events listeners (#578)
• DONE add pie chart tooltip (#544)
• DONE add percentage in piechart/treemap (#558)
• DONE Gauge(/ɡāj/)/Goal chart type (#520)
• DONE add pie chart legend
• IN PROGRESS vislib replacement (features: #502)

Kibana 7.8

Kibana 7.9

• IN PROGRESS vislib replacement (features: #502)
• split charts/ trellis / small multiples #500
• Heatmap #501
• Accessibility #300
• Tag cloud
• vislib replacement

Kibana 8

• scatterplot + sankey
• WebGL (high number of data points)
• Animations

Backlog

Axis

• Configure axis label max width/height as multiple of EUI sizes (issue #40)
• Add multilevel axis (shows axis on sub/aggregations) (similar to)

Charts

• Add padding between bar series clusters
• Add z-index to each series
• Preparation for vislib chart replacement (#66)
  • Scatterplot #502
  • Multiple charts/Split charts/Small Multiples #500
  • Truncate labels to specific width

Interaction/Animation

• Add color to tooltip value
• Test animations on data streams

General

• Move theming from canvas to SVG
• Keep up to speed with SVG rendering
• Add a direct render in konva native, without the use of React to increase performance
• Fitting functions elastic/kibana#17717 (PR #55)
• Fix yScaleToDataExtent: some bars are overflowing the chart

When rotating the chart, the left/right edges of the chart animation are bounded to the dimensions of the chart container, but not for the top/right edges so that the chart will appear to animate from outside of the container.

Bar Chart - clustered multi series is a duplicated story. We can remove it

Find a way to fully display tooltip markers near the edges.

Kibana Cross Issues:

• elastic/kibana#13248

This causes an overflow of the bottom part of the chart:

Left axes are overflowing into each other
Chart padding has been increased (should match right padding)

The existing story Bar Chart - with log y axis doesn't currently work.
Seems that the Log Y axis is not correctly handled when rendering the geometries:

<BarSeries
  id={getSpecId('bars')}
  xScaleType={ScaleType.Linear}
  yScaleType={ScaleType.Log}
  xAccessor="x"
  yAccessors={['y']}
  data={[{ x: 1, y: 2 }, { x: 2, y: 7 }, { x: 4, y: 3 }, { x: 9, y: 6 }]}
  yScaleToDataExtent={true}
/>

Kibana Cross Issues:

• elastic/kibana#12035 (test stacked charts with log scale)

📦 Meta issue for Vislib replacement project

Bugs

• Right Axis rotation pushes label off chart #673
• Add dash style to AnnotationLine.style.line #687
• Missing values default to arbitrary value when stacked #680

Missing features required by vislib

• Allow using ordinal scale type as fallback with AreaSeries #678
• Update UI for local toggle and global toggle with color picker UI #717
• Add domain Bounds margin on y domain #706
• hide axis but show gridlines #714
• hide axis labels/ticks #714
• Truncate axes labels to specific width #713
• Enable stack offsets for wiggle and silhouette #715
• Allow formatted mark accessor labels #775 (related to #615)
• Multiple charts/Split charts/Small Multiples #500

Issues with workarounds

• Axis formatter should default to global Axis #676
• Using stackAsPercentage on LineSeriesSpec
• Show default highlighted radius with hidden dots #679

High Priority

• Dot size based on point data #533
• Add color picker render prop #538, #545
• Allow xAccessor as a function #551
• Add series label settings to show full series label #539 Add groupIdAccessor #537
• Add padding between bar series clusters
• Scatterplot (the current vislib implementation is a line chart without the line)
• Scale data to bounds
• Add annotation lines (like current time marker)
• Display orphan data (show point when we have intermitted data) (issue #63)
• Add external custom colour from spec props (issue #39) (PR #51)
• Add filter in/out series (only action to listeners) (PR #51)
• Add hover/click event for each legend series (PR #51)

Kibana Cross Issues

elastic/kibana#56143

This will help when trying to align multiple charts on the same dashboard/app.
The axes dimensions are currently computed automatically based on the labels and possible label overflows.
This will disable that process and strictly use the size provided, causing labels to overflow or be truncated.

Is your feature request related to a problem? Please describe.
Multiple charts can share the same vertical cursor when they have the same x axis.

Describe the solution you'd like
We need to add two props like the following to the chart:

• onExternalCursorChange that is populated with the value from an external cursor
• onCursorChange that accept a listener and is called when the cursor change it's position

Describe alternatives you've considered
n/a

Additional context
n/a

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

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

Is your feature request related to a problem? Please describe.
It's required to draw piechart and donut chart, with one or multiple levels.

Describe the solution you'd like

• Reuse as much as possible the code already implemented for XY axis
• Use the same Chart structure but different specs for chart PieChartSeries

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Rendering a piechart is not so difficult, we can just use d3-arcs to compute the paths.

import { arc, pie } from 'd3-shape';

const pieSpec = {
  data: [[10],[20], [30]],
  accessor: 0,
}

const paths = pie().value((d: any) => {
  return d[pieSpec.accessor];
})(pieSpec.data);

// that is the space allowed to render the pie chart we should take in consideration the 
// how much space a direct labelling on the chart take
const { width, height } = chartDimensions; 
const outerRadius = width < height ? width / 2 : height / 2;
const innerRadius = pieSpec.donut ? outerRadius / 2 : 0;

const arcGenerator = arc();
const arcs = paths.map((path) => {
  const arc = arcGenerator({
    ...path,
    innerRadius: innerRadius,
    outerRadius: outerRadius,
  });
  return {
    arc: arc === null ? '' : arc,
    color: 'red',
    transform: {
      x: width / 2,
      y: height / 2,
    },
    geometryId: {
      specId: pieSpec.id,
      seriesKey: [],
    },
    seriesArcStyle: settings.theme.arcSeriesStyle.arc,
  };
});

The difficult part is the label positioning, place labels to avoid overlaps and overflows.
The pre-computing label dimensions will came in handy, but we need a good alghoritm to place them without overlapping them together.

We have to take in consideration also the style of the slices, specially when we will have many small slices.

Consider also label rotations as described here: https://www.amcharts.com/docs/v4/tutorials/labels-inside-pie-chart-slices/

Other interesting references:

• https://www.visualisingdata.com/2016/02/the-little-of-visualisation-design-part-1/

Features:

• label inside the donut chart: elastic/kibana#16820

Kibana Cross Issues

• https://github.com/elastic/kibana/issues?q=is%3Aopen+is%3Aissue+label%3A%22%3APie+Chart%22

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

Currently, the x-axis labels for timestamp shows full dates for more than 24 hours, it will be helpful to allow more formatting, examples:
When looking at a month show only the day (1-30)
When trying to compare weeks, the timestamp will be able to be in the context of weeks, show the day of the week instead of the full date (Sunday-Sutarday)
With these options, users will be able to switch the format based on what they are analyzing,

When multiple datapoints of a line or area chart have the same x and y value, the tooltip is displayed only for the series that reside on the top-most z-index.
The idea is to get all the possible values and display a tooltip with all the matching values

Kibana Cross Issues

• elastic/kibana#30932
• elastic/kibana#4885

Checklist

• 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

Often the x-axis is based on timestamp which can be very long, it will be helpful to show the x-axis vertically to save space and allow more labels in the given limited space

Often raised by users, users use dashboard/visualization in kiosk node displaying it on monitor, they can't tell the value of the chart without hovering on the area of the chart, this issue often also raised in the context of reporting, when you export a report isn't possible to hover and know the value of the chart.
It will be helpful if we had an option to display the chart with the values labels (similar to pie)

Is your feature request related to a problem? Please describe.
I want to be able to save the chart as PNG image. This can be used to simplify client side export in Kibana.

Describe the solution you'd like
Add the possibility to export the chart as a PNG via a function call to the chart.
Konva has the possibility to get the DataURL from the Stage object (see https://konvajs.org/docs/data_and_serialization/Stage_Data_URL.html)

 const dataURL = stage.toDataURL();

This, btw, will only save the chart into a PNG, not the whole chart with the legend.
A possibility for that is illustrated on https://github.com/tsayen/dom-to-image#how-it-works
but is basically the following:

• clone the DOM element of the legend
• inline all the styles
• create an SVG with a foreignObject with the cloned DOM element
• save the SVG as image from js
• copy and paste the image of the legend and the chart into a new image.

Describe alternatives you've considered
The legend can be rendered in canvas, but it's quite difficult and we need to move the whole action logic to a canvas element.
Another option is to render subsequentially a static legend on the chart canvas with only colors and texts of the existing legend.

Additional context
n/a

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

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

Add on hover interaction on each legend item and highlight series on chart

Is your feature request related to a problem? Please describe.
Add a color picker to choose a new series color when clicking on the legend item.

Describe the solution you'd like
Will use EUIColorPicker

Describe alternatives you've considered

Additional context

Kibana Cross Issues
elastic/kibana#28618
elastic/kibana#19341

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

Is your feature request related to a problem? Please describe.
Add visual regression tests with image snapshot comparisons.
This can be applied to:

• storybook stories
• custom tests

Describe the solution you'd like
Evaluate the following:

• custom implementation with jest-puppeteer
• storyshots-puppeteer
• percy or other SaaS tools
• loki

Requirements:

• single snapshot comparisons
• comparisons between different renderings canvas === svg ? ok : fail

References:

• https://github.com/mojoaxel/awesome-regression-testing

Is your feature request related to a problem? Please describe.
Our current computeChart function is massive and produces many side effects, which makes it hard to write tests for. Further, any time computeChart is called, all computations are run again even if certain values have remained the same and may not need to be re-computed.

Describe the solution you'd like
We can consider reducing the side effects produced by this function and reduce the size of the function (moving logic and computations into additional functions which can be themselves tested). We can also consider ways to address partial (and not full) re-computing (memoization, transducers to chain transformations, etc.).

Describe alternatives you've considered

Additional context
n/a

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

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

If you use a dataset with more than 10 x values, seems that the we don't correctly computed the bottom axis label width.
Can be reproduced using the following to generate a simple dataset:

import { DataGenerator } from '../utils/data_generators/data_generator';

const dg = new DataGenerator();
const data = dg.generateSimpleSeries();

...
<AreaSeries
    id={getSpecId('area')}
    xScaleType={ScaleType.Linear}
    yScaleType={ScaleType.Linear}
    xAccessor="x"
    yAccessors={['y']}
    data={data}
/>

The axis values are correct, but seems to be cutted off:
0, 5, 1, 1, 2, 2, 3, 3, 4, 4 instead of
0, 5, 10, 15, 20, 25, 30, 35, 40, 45

Describe the bug
On published storybook the Story addon panel is empty

To Reproduce
Steps to reproduce the behavior:

1. Go to https://elastic.github.io/elastic-charts/
2. Click on any example
3. Click on Story addon panel on the right panel
4. The panel is empty

Expected behavior
The Story panel should shows the JSX code of the example

Screenshots

Version

• OS: OSX
• Browser: Chrome
• Elastic Charts: 2.0.0

The axis grid lines should be moved on the background, behind chart elements to clean up the chart a bit.
We can make that grid appear maybe decreasing the opacity of the elements but I think it's better to move the grid behind elements.

Add test coverage for the mergeWithDefaultTheme function

Add a first basic issue template to keep track of kibana cross issues:
The template can have a checklist like the following:

<!--
GitHub is reserved for bug reports and feature requests. The best place
to ask a general question is at the Elastic Discourse forums at
https://discuss.elastic.co. If you are in fact posting a bug report or
a feature request, please include one and only one of the below blocks
in your new issue.
-->

<!--
If you are filing a bug report, please remove the below feature
request block and provide responses for all of the below items.
-->

**Elastic Chart version**:

**Browser version**:

**Browser OS version**:

**Description of the problem including expected versus actual behavior**:

**Steps to reproduce**:
 1.
 2.
 3.

**Errors in browser console (if relevant)**:

**Kibana Cross Issues**:

**Checklist**
[] 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

The below is a list of near term items planned for the first release on February 2019.

Paddings/Margins

• Add chart padding
• Add data padding between chart and axis (a configurable padding of the chart elements and the axis

Scales

• Add time scale (see limitations)
• Merge scales with multiple series depending on grouping (phase 1: basic merging, no stacking controls/rendering order)
• Add custom X domain for series (enable the dev to add it’s own domain extents to control the visualization)
• Fix computeOrdinalDataDomain in domain.ts sort by uniq value: add comparator
• Check when adding one or more split series, transform the x axis from linear/time to ordinal
• Compute the right band width for a linear/time scale type
• Check if 0 split series are used, than use the original x scale type (linear, time etc)
• Transform ordinal scales into linear scales to compute less number of ticks when possible (our current ordinal scale compute all ticks dimensions for each element in the domain, if the dataset x value can be converted into a linear scale, it’s better to convert back to linear before computing ticks to optimise axis computation)
• Fix ordinal scales rendering with multiple data series

Colors

• Add basic colors to bar charts (define what is the policy behind colouring)
• Merge colour scales: when using more than one series type (bar + line) manage the colors together
• [ ] Add external custom colour from spec props (moved to phase 2)

Axis

• Set max axis extent
• Rotate labels
• Horizontal / vertical grids
• [ ] Configure axis label max width/height as multiple of EUI sizes (moved to phase 2) (#40)

Charts

• Add opaque non stacked bar/area charts
• Add curves to lines and areas
• Add bar series chart
• Add area chart
• Add line chart
• Add stacked area charts
• Add stacked line charts
• Renderer multiple type charts
• [ ] Handle negative values in stacked area charts (moved to phase 2)
• Add test with 3 or more stacked areas
• [ ] Add z-index to each series (moved to phase 2)

Interaction/Animation

• Add interactions (tooltip)
• Add animations
• Add background rect to each interval to enable the highlight
• Add hover interaction to line charts
• Add hover interaction to area charts
• Add brush/selection tool (check if the selection be discrete and relative to the main X axis value. Keep the brush tool independent from the elements on the chart aka drag from everywhere)
• [ ] Add color to tooltip value (moved to phase 2)

General

• Implement chart rendering in canvas (konva)
• Implement first version of chart in Canvas
• Chart rotation 90 degree
• Chart rotation -90 degree
• Chart rotation 180 degree
• Expose the chart rotation props to a generic Settings component
• Add chart theming options
• Refactor axis dimension computation to accommodate the new format of series/domains
• Remove unnecessary code of the old bar, line, area rendering
• [ ] Add a direct render in konva native, without the use of React to increase performance. (moved to phase 2)
• [ ] Fitting functions elastic/kibana#17717 (moved to phase 2)(PR #55)
• [ ] Fix yScaleToDataExtent: some bars are overflowing the chart (moved to phase 2)
• Check performances (build, animate and update 1 high density chart, multiple small density charts, multiple medium density charts)

Legends

• Add legend component
• [ ] Add hover/click event for each legend series (moved to phase 2) (PR #51)
• [ ] Add color picker for each legend series (moved to phase 2)

Planned tasks

GitHub project

3 workstreams are planned for the roadmap toward 7.1.
The priority order of each task is the following:

1. Assist teams with new chart integration

• Future parity of the library to TSVB timeseries and Discovery
• support EPAM team to replace the TSVB timeseries (line, bar, area)
• replace Discovery barchart by chart team

2. Test and docs

• increase test coverage (snapshot testing / visual regression testing)
• increase quality of documentation (add better description of chart usage and configuration)

3. General features

• basic chart exporting to PNG (dependency of reporting roadmap for 7.2)
• showing value labels on chart without hover

Dependencies

The reporting team will start client-side export of ES chart in 7.2. We have to prepare the field with some basic functionalities to export PNG from charts.

With this PR: elastic/kibana#29896 the icon to collapse the legend is now always on the same place (bottom left) and disappear when moving the mouse focus out of the chart panel.
We need to align the current implementation with that style

This issue keeps track of the tasks required to replace completely the Kibana TSVB charts with the elastic-charts:

Feature parity

• DONE Series specific styling (line width, opacity) #138 PR #170
• DONE Handle band area charts (used on percentile band mode) #144 PR #157
• DONE Add last bucket value on the legend #143 PR #155
• DONE Fix for time scales in different time zones #130 PR#151
• DONE Handle/Test negative values in stacked area charts #135 PR #149
• DONE Add annotation line #81 PR #126
• DONE hide in legend (hide that series from the legend) #137 PR #147
• DONE Add a separated name props on each series #136 PR #142
• DONE Display orphan data points on line/area series #63 PR #114
• DONE Add external custom colour from spec props #39 PR #95
• DONE Crosshair and vertical/horizontal cursors #80 #58 PR #96
• DONE Scale data to specific domain #86 PR #98
• DONE Add filter in/out series only action to listeners) PR #51
• DONE Add hide/show series chart internals) PR #51
• DONE Add hover/click event for each legend series PR #51
• DONE Add color picker for each legend series #23 PR #51

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

Currently on stack chart when hovering on an area it only shows the values of the what the mouse is hovering on, it requires the users to be more accurate with their mouse hovering, which in busy charts can be challenging, also it is harder to compare values since you can only get a single value at each time. It will be more helpful if in stack chart you can see the values of all the stacked lines/bar/areas once hovering, either in the legend or in the tooltip (preferred)
current (you can't tell how much exactly the blue bar is):

multiple values in tooltip:

Is your feature request related to a problem? Please describe.
Interactions with elements in the charts currently may have effects internal to the chart as well as effects controlled externally by the parent application. An example of this is interactions on hover with the legend items. On hover of a legend item, there is a chart internal effect of highlighting the series elements within the chart and also the values for identifying the series are passed along to a listener which the parent application can define. This issue is for addressing that the developer user may also want to control the chart internal effects in some way.

Describe the solution you'd like
There are a few ways to approach this:

• The user cannot change the internal effect but can toggle if the internal effects happen or not in response to an interaction. So maybe for the example interaction mentioned, there is a boolean prop that can be defined that controls if the default internal effect happens or not.
• The user can override the default internal effect. In the example of the legend item hover, the user could override the internal effect and define their own effect for how the series should look when highlighted (currently the default is to reduce the opacity of the non-highlighted series elements, but maybe the user wants to apply a border).

Describe alternatives you've considered
I wonder if we should think about a way to generalize interactions to reduce some of the boilerplate that is replicated everytime we add an interaction. For example, currently, when implementing an interaction, one must:

• add the action to chart state
• add a function in chart state to set/remove any externally defined listener
• within the action, pass through data to the externally defined listener
• add the action to settings component to make it available for components to call the action

Whichever path we take with the defaults, this will add additional things that will need to be done when adding any interactions, so I'm wondering if we also want to think about tackling this generalizations issue.

Additional context
Originally brought up here from this comment in PR #31.

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

Is your feature request related to a problem? Please describe.
Some series may have orphan data points, points that are between two null datums like:

[
   ...,
   {x: 1, y: null},
   {x: 2, y: 10},
   {x: 3, y: null},
   ...,
]

When a series has orphan data points like the example above, we need to find a way to display the single point value.

Fitting functions (#55) can fill the gaps with specific values (like adding zeros or an average value), but the developer or user can decide to keep null values.

Describe the solution you'd like
If the style of the line/area already shows single circles as data points we don't need to add anything to that rendering.

If the style configuration hides the data points we need to force displaying these points when orphans.

We also have to configure the line/area path generation defined function to correctly specify when a line/area is not defined: https://github.com/d3/d3-shape#line_defined https://github.com/d3/d3-shape#area_defined

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

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

As reported in elastic/kibana#31244, it would be great to have the possibility to serialize the configuration and enable exporting a chart as js script.

First draft of To Dos:

• Serialize the configuration to a JSON or any simpler representation of JSX configuration
• Customized build to be used in browser environment without any deps
• Basic filtering application to enable minimal functionality outside Kibana.

Kibana Cross Issues

• Export as JS Snippet

Checklist

• 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

Is your feature request related to a problem? Please describe.
Ensure a correct chart configuration for the developer

Describe the solution you'd like
Add a warning message on console if the chart doesn't respect a set of basic rules like:

• avoid adding axes that are not related to configured series
• avoid mixing series with different scale types
• don't add a piechart together with a barseries
• invalid accessors (for example, xAccessor={'foo'} when the data has no foo fields)

Prevent chart from not showing when config is bad, such as...

import React from 'react';

import { Chart, LineSeries, ScaleType, Position, Settings, Axis } from '../src';
import { SeededDataGenerator } from '../src/mocks/utils';

export class Playground extends React.Component<{}, { isSunburstShown: boolean }> {
  render() {
    const dg = new SeededDataGenerator();
    const data = dg.generateGroupedSeries(10, 2).map((item) => ({
      ...item,
      y1: item.y + 100,
    }));

    return (
      <>
        <div className="chart">
          <Chart>
            <Settings showLegend />
            <Axis id="y1" groupId="g1" position={Position.Left} title={'y1'} />
            <Axis id="y2" groupId="g2" position={Position.Left} title={'y2'} />
            <Axis id="x" position={Position.Bottom} title={'x'} />
            <LineSeries
              id={'aaa'}
              xScaleType={ScaleType.Linear}
              xAccessor={'x'}
              yAccessors={['y', 'y1']}
              splitSeriesAccessors={['g']}
              data={data}
            />
          </Chart>
        </div>
      </>
    );
  }
}

Describe alternatives you've considered
n/a

Additional context
n/a

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

Describe the bug
The tooltip label the x value as X Value if not title on horizontal axis is available.
If multiple horizontal axis are available and only one axis title configured, the tooltip will shows X Value also if we have titles on it.

To Reproduce
Steps to reproduce the behavior:

1. Go to Area Chart - with 4 axes storybook story (remove a title from one of the two horizontal axes)
2. Hover over any data point

Expected behavior
Always display at least one title independently of the status of the axis titles.

We also have to include the possibility to add an hidden title on an axis so we can have the label on the tooltip but no axis title displayed on the chart

Screenshots

Version (please complete the following information):

• OS: osx
• Browser: chrome
• Elastic Charts: > 2.0.0

Additional context
n/a

Errors in browser console
n/a

Kibana Cross Issues
n/a

Checklist

• 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

Currently chart.margins will be applied to spacing between margins with the same position, but there should be a separate prop which controls axes spacing.

Specify a color for each data series on the chart specs

Is your feature request related to a problem? Please describe.
See discussions from other issues/PRs:
#25 (comment)
#51

Describe the solution you'd like
Would like to settle on what the UI for the legend items interactions should be. This would cover:

• How to handle the color picker (in current Kibana, it is opened in the same panel as the +/- buttons for removing/focusing a data series, but initial feedback was that this should be independent of that panel and open up just by click on the dot)
• How to handle chart internal data series visibility toggling. This is currently not a feature in Kibana, but the idea is that separate from actual removal/focus of the data for an actual series (i.e. what currently happens when you click +/- in Kibana), there should be a way to keep the data for a series but not render it within the chart. This includes:
  • How to show/hide a series within the context of other series being visible (e.g. if I have series a, b, c; I want to toggle the visibility of a while keeping b & c visible)
  • How to show/hide a series individually (which also toggles the visibility of the other series); an example of this is say I have series a, b, c, I want to toggle showing only a (making b & c not visible) and showing everything but a (making b & c visible).
• How to handle chart external data series filtering. This is currently the functionality of the +/- buttons in Kibana. The new chart library is agnostic to what actually happens on these events, but it is a way for an application to bind some custom functionality to these interactions so that when a user interacts in these ways, the data for identifying the series gets passed to the custom listeners which can define their own behaviors, e.g. a new query with the values passed to the listener as a filter.

Describe alternatives you've considered
See the links in the first section for some options discussed and current implementation.

Additional context

Kibana Cross Issues

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

Is your feature request related to a problem? Please describe.
We need to add a license checker that blocks PRs when a incompatible license is found in our dependencies.

Describe the solution you'd like
We can use a similar solution to the one used by Kibana, using license-checker and a small script to execute it in a new GitHub action.

Describe alternatives you've considered
I didn't find any github app or service that does this check. Only FOSSA but it has only business plans.

Prepare a story or a global knob to switch EUI darkmode on/off

Currently the CanvasBBoxCalculator canvas is attached and then destroyed as soon as computations are done, but is not actually offscreen.

Is your feature request related to a problem? Please describe.
Limit the chart to a specific data domain on each axis.
It's typically used on y axis to cut the max value out or to start the chart at a min value.
It's used on x axis when you want to display a larger domain than the one used on the dataset.

Describe the solution you'd like
Add a prop at chart or series spec level to limit the domain of the chart to that min and max.

Describe alternatives you've considered
n/a

Additional context
n/a

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

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

Is your feature request related to a problem? Please describe.
We need to display annotations on charts like the current time marker, partial-data areas or other general annotations.

Describe the solution you'd like
Add the possibility to include vertical or horizontal lines or rectangles on the chart, specifying the base x or y value where the line will lie.

This can be split into 3 different tasks:

• add line annotation + tooltip + marker #104
• add rectangle annotation + tooltip #105
• possibly add text annotation #106

Describe alternatives you've considered
n/a

Additional context
n/a

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

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

Is your feature request related to a problem? Please describe.
Add the possibility to switch between simple element tooltip to multi/element tooltips like vertical or horizontal cursors or crosshair.

Describe the solution you'd like

The user/developer can select the type of tooltip that's better conforms for the chart use to enable the following possibilities:

• single tooltip with single value
• single tooltip with multiple values (with all data thats belongs to the same data point or to the same X or Y axis value, eg stacked charts see: #68)
  
  See also https://www.chartjs.org/docs/latest/general/interactions/modes.html as a reference

Describe alternatives you've considered

Various solutions can be applied:

• remove the existing listeners to graphic elements and use directly mouse coordinates to mapping series data values getting series values from inverted x and y scales or use some spatial index for faster searches like https://github.com/mourner/flatbush
• draw a hidden layer of grouped elements with listener attached to it (can be slow and can only works on vertical and horizontal cursors.

design note: the tooltip could be crowded specially with multiple splitted series.
extra: this can solve the following issue: #58

Additional context

TVSB, charts used by Stack Monitor and any other chart that use react-vis in kibana currently has the possibility to include a vertical cursor on the chart instead of the tooltip.

Kibana Cross Issues

• elastic/kibana#14914
• elastic/kibana#13864

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