Legend should not show values from the chart

[wylieconlon]

Describe the bug
The legend shows either the right-most value from the chart or the currently-hovered series. It would make more sense to hide the value, giving more space for the legend or chart.

To Reproduce

This behavior is shown in all of the chart samples, including: https://elastic.github.io/elastic-charts/?selectedKind=Bar%20Chart&selectedStory=with%20axis%20and%20legend&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fstories%2Fstories-panel

Expected behavior
Because there is already the same information available elsewhere, I would expect the numeric value to be hidden on the legend.

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

[wylieconlon]

Looks like this is potentially also a way to avoid #163

[markov00]

The reason is exactly the one @emmacunningham wrote in slack: in a time series visualization is useful to see the last bucket value directly on the chart (legend in this case), instead of move your mouse to every single chart and aim the last data point to see its value.

For sure there is a bit of duplication between the tooltip and the legend where, on hover, we are showing all the series values either on the legend and on the tooltip. This doesn’t happen if you are using a TooltipType.Follow tooltip, that will shows only the value of the hovered element (not all the values on the same x value) that is more or less what TSVB is currently doing.

We for sure have to go through our defaults and configure them in a way to avoid as mush as possible code by consumers for sure (there is an issue to follow for that discussion: #121)

I think @AlonaNadler can give us more insight for from a customer point of view. It will be great to have the rationale behind that behaviour in TSVB and it will also help us if we have any ER for that functionality

[AlonaNadler]

I agree with Emma

in a time series visualization is useful to see the last bucket value directly on the chart (legend in this case), instead of move your mouse to every single chart and aim the last data point to see its value.

@wylie in case users can hide the legend and get more space for the chart, do you still have this concern?

[wylieconlon]

I don't personally see the value in showing the last value, even in a time series. It feels redundant to what's already shown in two other ways- on the tooltip and by the axis values. It's also not useful for bars. So the ideal change for me is to completely remove this from the legend, and the second best option is to change the default so that this is not shown by default.

[markov00]

I'm ok to disable the showLegendDisplayValue by default. Currently TSVB and most of the API charts are displaying that the last bucket value, so they can enable it separately.

We will not remove completely that value from the legend, it's a requested feature. We can fix some use cases like when using non temporal data, but we can't remove it completely.

I just want to show you the value of this label on the legend with some use cases:

1. dashboard full of charts that depict the last x minutes of logs
2. visualization with 4/5 or more lines/elements displayed
3. on visualization with stacked values
4. on a dashboard displayed on a big screen (control center or anything similar)

Let me try to give you some examples on those:

1. in systems like APM or SIEM tools where the metrics displayed are used to identify as early as possible a problem, it's very useful to check the current/last value of the metrics as fast as possible. It's too time consuming going through all the charts with the mouse to get the last value (specially if you have to report that value to someone else). There are some request in kibana repo about that, where Ops people want to see the data value right away without interactions.
   For example if I look at the following graph my eyes have to go first to the last bar or point on the right, then draw an imaginary line to the left to find the axis, and then back and forth 1 or two times to be completely sure the "interval" of the data value.

2. if the number of lines increase, it increase also the effort to understand that value from the axis per single chart

3. on stacked values it also much more difficult to get a nice overview of the value of each single stacked bar, in that case, and if we are on the Operation/APM use case, it can be useful to have a clear understanding of the last bucket of data

4. on big screen (a led wall or similar) you can get the general overview of the data, but you can't interact. Having a value there can help understand the situation

Same Grafana user also ask us to introduce more values on the legend like avg, min, max

[wylieconlon]

Okay, so I can see how it would be useful to get an "at a glance" overview of the data, but I don't think that putting the last value in the legend is the most effective way of accomplishing this. It's not obviously connected to the right-most value, and the live-updating on hover makes it more confusing.

In the Grafana example, it has extra text "Current: 103 milliseconds" which gives context for the value. I can think of several alternatives to placing the last value in the legend:

• Add more text, like "Current: 6". This probably requires more space
• Use grid lines by default for line charts
• Create an "at a glance" section which summarizes the data- potentially also useful for accessibility
• Render a label on the last value, attached to the line. This can be done with Vega, for example:
  

Would you be open to any of those approaches?

[markov00]

Absolutely, actually we are just trying to replicate the existing features of the libraries we have on Kibana, so in that case it's a main feature for TSVB.

Add more text, like "Current: 6". This probably requires more space

We can find the required space if necessary, maybe it's worth having a meeting with the design team on that (we actually don't have any specific design decision on the legend)

Use grid lines by default for line charts

We are going to add them, we have a style document that we are following to configure the default style of the charts https://docs.google.com/document/d/1bEK70zhXxM-t64H7rzohtUvo-fMmDy4qG0H7BD48lGo/edit #232

Create an "at a glance" section which summarizes the data- potentially also useful for accessibility

Yep, we also considered that, when we will start planning for accessibility we will consider display some part of the summary of specified by the user configurations.

Render a label on the last value, attached to the line. This can be done with Vega.

That's another idea. There are few small problems here that needs to be solved: labels can overlaps and can happens most of the time for specific type metric charts, and labels moves up and down and you always have to visually link the line color to the color of the line to know what value you are looking at.

So yes, there isn't a best practice, or there isn't a good way or a bad way to accomplish it. As first step we just reimplemented the current solution, we are absolutely open to add and include different solutions to that problem.

[markov00]

@wylieconlon I think I've just found a more "robust" reason for that value on the legend:
if you add more than one TSVB chart on the same dashboard and you move the cursor over one chart, all the other TSVB chart will shows a line at the same position of the mouse cursor on the other chart. They not only shows that line, but they also update the value on the legend: this allows to quickly check values on the same X position along multiple chart without moving the mouse to each single chart on the same X position.

I'm completely with you about the fact that it's not intuitive at the first look and also redundant when comes to a single visualization, but can be useful when multiple visualization are displayed.

[cchaos]

For me, the problem I had with the value in the legend was not that it was there at all but that what the value was representing. I would have assumed that while not hovering on the chart, the legend values would be accumulative (or whatever the aggregation is) for the whole series across the x-axis. Basically, a total. I don't think it's clear at all that this number would indicate the last bucket in the series.

Perhaps that's just a small change?

[markov00]

@cchaos so for sure we have to disable that for ordinal x axis series because we don't have a linear ordering there, so the last bucket in that case doesn't mean nothing.
TSVB was built with that legend feature, so we have to keep it for TSVB.
We should implement various options there like: show last bucket, show total, hide completely.
We should also find a way to describe that value, maybe a small title on top-right of the legend saying: last value, total sum etc?

[cchaos]

It would be nice not to have to include more text to the chart. I'm thinking that simply using the same highlighting scheme could help clarify. For instance, when indicating "last bucket", when the user is not hovering on the chart, always highlight the last bucket:

[markov00]

yes that is a good idea, but we have also to consider how this will affect an already existing feature in kibana: we have a rectangular annotation similar to the highlight that highlight if the time window selected doesn't cover fully the first and last buckets

[cchaos]

Just make sure they're not styled the same, haha 😄

[nickofthyme]

To add more ideas to this. I'm generally not a fan of this last value thing at all. But I noticed that if we have a split series and one of the series doesn't have a value for the "last" bucket, then the next-to-last value is checked and so on. Potentially resulting in the FIRST value if a given series only has a value in the first bucket. Resulting in a melting pot of first to last values thoroughly confusing the user.

Notice in the gif below how PH has a value for zip (2nd-to-last bucket) but not deb (the last bucket) and the none selected state shows the zip value of 2????

Code Example playground.tsx

See code

Copy/paste into playground!

import React from 'react';

import { Axis, Chart, getAxisId, getSpecId, niceTimeFormatter, Position, ScaleType, Settings, BarSeries } from '../src';
import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
import { CursorEvent } from '../src/specs/settings';
import { CursorUpdateListener } from '../src/chart_types/xy_chart/store/chart_state';

const DATA = [
  {
    'extension.keyword': '',
    'geo.src': 'IN',
    count: 23,
  },
  {
    'extension.keyword': '',
    'geo.src': 'CN',
    count: 17,
  },
  {
    'extension.keyword': '',
    'geo.src': 'US',
    count: 6,
  },
  {
    'extension.keyword': '',
    'geo.src': 'BR',
    count: 3,
  },
  {
    'extension.keyword': '',
    'geo.src': 'FR',
    count: 3,
  },
  {
    'extension.keyword': 'gz',
    'geo.src': 'CN',
    count: 9,
  },
  {
    'extension.keyword': 'gz',
    'geo.src': 'US',
    count: 5,
  },
  {
    'extension.keyword': 'gz',
    'geo.src': 'IN',
    count: 4,
  },
  {
    'extension.keyword': 'gz',
    'geo.src': 'BD',
    count: 3,
  },
  {
    'extension.keyword': 'gz',
    'geo.src': 'AR',
    count: 2,
  },
  {
    'extension.keyword': 'css',
    'geo.src': 'CN',
    count: 7,
  },
  {
    'extension.keyword': 'css',
    'geo.src': 'VE',
    count: 3,
  },
  {
    'extension.keyword': 'css',
    'geo.src': 'IN',
    count: 2,
  },
  {
    'extension.keyword': 'css',
    'geo.src': 'US',
    count: 2,
  },
  {
    'extension.keyword': 'css',
    'geo.src': 'AF',
    count: 1,
  },
  {
    'extension.keyword': 'zip',
    'geo.src': 'CN',
    count: 8,
  },
  {
    'extension.keyword': 'zip',
    'geo.src': 'IN',
    count: 7,
  },
  {
    'extension.keyword': 'zip',
    'geo.src': 'US',
    count: 4,
  },
  {
    'extension.keyword': 'zip',
    'geo.src': 'PH',
    count: 2,
  },
  {
    'extension.keyword': 'zip',
    'geo.src': 'BD',
    count: 1,
  },
  {
    'extension.keyword': 'deb',
    'geo.src': 'CN',
    count: 5,
  },
  {
    'extension.keyword': 'deb',
    'geo.src': 'SA',
    count: 3,
  },
  {
    'extension.keyword': 'deb',
    'geo.src': 'IT',
    count: 2,
  },
  {
    'extension.keyword': 'deb',
    'geo.src': 'PK',
    count: 2,
  },
  {
    'extension.keyword': 'deb',
    'geo.src': 'CG',
    count: 1,
  },
];

export class Playground extends React.Component {
  render() {
    return (
      <Chart>
        <Settings tooltip={{ type: 'vertical' }} debug={false} legendPosition={Position.Right} showLegend />
        <Axis id={getAxisId('timestamp')} title="timestamp" position={Position.Bottom} />
        <Axis id={getAxisId('count')} title="count" position={Position.Left} tickFormat={(d) => d.toFixed(2)} />
        <BarSeries
          id={getSpecId('Testing')}
          xScaleType={ScaleType.Ordinal}
          yScaleType={ScaleType.Log}
          data={DATA}
          xAccessor="extension.keyword"
          yAccessors={['count']}
          splitSeriesAccessors={['geo.src']}
        />
      </Chart>
    );
  }
}

[markov00]

🎉 This issue has been resolved in version 18.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀