Kibana: Pie chart scaling in 6.1 results in unusable visualizations.

[robcowart]

Kibana version: 6.1

Elasticsearch version: 6.1

Server OS version: CentOS 7

Browser version: Chrome

Browser OS version: MacOS High Sierra

Original install method (e.g. download page, yum, from source, etc.): yum

Description of the problem including expected versus actual behavior:
Pie charts which worked well in 6.0.1 and all previous versions no longer scale the same, resulting in previously useful dashboards becoming unusable. This appears to be due to space being reserved for the newly featured labels. However if labels are not enabled, the charts should scale as previously before labels were introduced.

Here is an example of pie charts in 6.0.0, which are rendered as they have been since at least 5.0.

Here is the same dashboard in 6.1 at the same window size. The pie charts are now much smaller (even though labels aren't enabled) resulting in an unusable visualization, which impacts the entire dashboard (much more difficult to quickly set filters due to small size of chart).

[imweijh]

Same problem here with 6.1;
Visualize in dashboard seem fat a lot.

v5.6 and v6.0.1 is ok

[robcowart]

Unfortunately #15641 does not solve this problem (I left my comments there, redirecting back to this issue).

After a closer look, I believe the issue is excessive padding due to the restructuring of the elements which contain the visualization.

Here is 6.0.1...

Here is 6.1.0...

It is obvious in this comparison how whitespace is wasting screen real estate that was previously being used for rendering data, and is preventing the pie chart from being used as effectively as before. (I will now have to investigate other visualization types as well.)

Using Chrome's Developer Tools this can be easily quantified:

From 6.0.1...

From 6.1.0...

Alone the panel-heading requires 16 pixels more space in 6.1.0 than in 6.0.1. That is 16 pixels of space that adds no value. If you have three rows of pie charts on a dashboard (e.g. the Logstash Netflow Module), you have added 48 pixels. When considering the space wasted at the bottom as well, the result is nearly a full grid height of wasted screen real estate.

While all of these changes might work well on 3k/4k/5k monitors, it is unwise to assume that users will have more than 1920x1080 to work with (1600x900 is probably a safer bet). Even those of us that use high resolution monitors, most likely have them to get more information on the screen, not to have that extra screen real estate wasted with unnecessary whitespace.

[SnchitGrover]

+1 Because of a larger legend, the visualisation goes off.

[timroes]

This ticket currently mixes up multiple issues.

There is
a) an issue, that pie charts are not taking enough space due to them always saving space for labels (even if they are disabled). This is addressed in #15641
b) due to changes in the dashboard layout we have less space available for visualizations in general. I am also applying the dashboard tag for this, so that we can check and take this into design considerations.
c) @SnchitGrover could you please open a separate issue for that, since legends breaking the chart, is unrelated to these two issues.

[robcowart]

@ppisljar #15641 doesn't completely solve this issue.

[ppisljar]

sorry, seems partly resolves text in the PR is still treated as resolves and auto closes the issue.

[robcowart]

I have spent some time modifying the styling with good results. In particular...

In KIBANA_HOME/src/core_plugins/kibana/public/dashboard/styles/index.less change these values...

.panel-content {
  padding: 0px 4px;
}

.panel-heading {
  padding: 4px;
}



md5-afea44d03f706c0d23061fab21f6bc03



visualization {
  padding: 0px;
}

Results are great for pie charts and have no obvious negative affect on other visualization types as well.

[robcowart]

I spent even more time on this today as there where actually some worse offenders with excessive padding than my suggestions above. So with these changes you maximize the size for the visualizations, while perserving a little more spacing between visualizations.

KIBANA_HOME/src/ui/public/visualize/visualize.less

visualization {
  padding: 2px;
}

KIBANA_HOME/src/ui/public/vislib/styles/_layout.less

.vis-wrapper {
  padding: 0px;
}

KIBANA_HOME/src/ui/public/vislib/styles/_legend.less

.legend-col-wrapper {
  padding-top: 0px
}

KIBANA_HOME/src/core_plugins/kibana/public/dashboard/styles/index.less

.panel-content {
  padding: 0px 4px 4px 4px;
}
.panel-heading {
  padding: 4px 8px;
}

NOTE: the .panel-content is applied to two divs, one in the other. so the composite result ends up as 0 8px 8px 8px

Here is what out-of-the-box 6.1.1 looks like...

And here is the result after the above suggested changes (plus #15641)...

The result is much screen real estate used for information as opposed to whitespace, nothing being cutoff (see the markdown visualization at the top), and it still avoids appearing cluttered.

I can create a PR for these changes if desired.

[cskowronnek]

+1
My donut pie charts look awful in 6.1

[robcowart]

@cskowronnek if you want to restore some usability until this gets fixed properly, the changes I suggested above are here...

https://github.com/robcowart/kibana_6.1.x_vis_scaling_fixes

This include the both the pie chart w/o labels fix (which did make it into 6.1.2) and the stylesheet changes to reduce padding where it is causing issues. Just replace the current Kibana files with the ones provided in that repo; Delete KIBANA_HOME/optimize/bundles; restart Kibana. Kibana will run a optimization process before starting, which can take a few minutes. This is necessary to pickup the changes.

[ppf2]

Seems like the same issue, we are also seeing shrinking pie charts due to scaling causing them to be unusable with the metricbeats default dashboards. This seems to be exacerbated by the longer docker container/image names (note that container and image names are partially blanked out below on purpose, but you can see what the pie charts look like for these situations).

[t3chn0m4g3]

I was starting to test drive Kibana 6.2.4 (coming from 5.x) and at first I thought something went wrong with the saved_objectsimport.

Regarding visualizations I am experiencing the exact same problems as @robcowart (thanks for the fix BTW :bowtie:)

I do understand that there is probably more work involved to find a permanent solution, but given the fact that the usefulness of dashboards has drastically declined I would like to know if there is a timeframe / version no. we can expect a solution?

Unfortunately it does not stop with the padding / margins either, even the chosen font has problems with the design changes:
K 6.2.4:

K 5.6.5:

[robcowart]

@t3chn0m4g3 more things changed (and unfortunately for the worse) in 6.2. I am attaching my 6.2.x-specific fixes. I haven't tested them in 6.2.4 yet, but they work well in 6.2.0-6.2.3. I have used them both in my environment and at 6 or 7 customer deployments.

kibana_6.2.x_vis_scaling_fixes.zip

[t3chn0m4g3]

@robcowart Thank you very much! I will apply and test them and give you feedback.

[t3chn0m4g3]

@robcowart This is so much better!

Before fix:

After fix:

The only tiny thing I noticed are the cut offs at the Histograms (red arrows). But I would take the fixed version every time over the standard. Could not care less for the (admittedly beautiful) label feature if that reduces the dashboard readability.

Thanks again 👍

[robcowart]

@t3chn0m4g3 I am glad it works for you. I will take a look at the issue you mentioned. It might be an easy fix.

Thanks for the feedback here. I keep hoping that this issue will get more attention, and perhaps with the additional feedback it will.

[stacey-gammon]

The major issue with pie charts has been fixed, so is it correct to say that all that is remaining is unhappiness with the current increased padding on dashboards?

I recently filed https://github.com/elastic/kibana/issues/18582 to switch over to EUI panel components. Kibana as a whole is undergoing some very big UI changes, with an end goal of v7. We will definitely keep this padding feedback in mind as we switch over to EUI panel components and work with the design team to pick an appropriate padding.

Going to close this in favor of that one, but let me know if there is anything I am leaving out!