Zabbix 7.2 - Top Item widget - sparkline graphs - how to make them wider?

[tcweb]

Good day, I'm doing some playing with the new Top Items widget.
I cannot seem to figure out how to increase the WIDTH of the sparkline graphs.

The field in the sparkline configuration section, only seems to make the thickness of the line wider...not make the graph itself wider.

Perhaps this is a simple bug? Or a display bug, since it looks like the columns may be padded with space? I just upgraded from 7.0.X --> 7.2 yesterday. (No issues with the upgrade)

I have seen several pre-release pictures of these graphs, and they all seem to be configured wider.

See below:

[tcweb]

I'm surprised that nobody else is playing with this cool new widget feature.

Or am I the only one who is having this issue?

[randymartin]

I also am unable to expand de field

[cyber]

Not everyone uses all the intermediate versions... nice features in 7.2 and 7.4.... I will try them out, when they reach v8 LTS..

[prothorman]

Hola, para corregir esto debes dirigirte a la siguiente ubicacion en tu servidor y modificar cualquiera de los archivos css dentro /usr/share/zabbix/ui/assets/styles dentro modificar por ejemplo el template blue-theme.css, dentro deberas buscar las lineas que modifican la parte visual del item topitems, ahi deberas agregar las siguientes lineas:

div.dashboard-widget-topitems z-sparkline {
min-width: 64px;
height: 20px;
}

el resultado final quedara asi

form.dashboard-widget-topitems #list_columns {
line-height: 1.4em; }
form.dashboard-widget-topitems #list_columns .text {
max-width: 400px; }

div.dashboard-widget-topitems .list-table th.center {
text-align: center; }
div.dashboard-widget-topitems .list-table tr[data-hostid] {
cursor: pointer; }
div.dashboard-widget-topitems td {
line-height: 20px;
height: 20px; }
div.dashboard-widget-topitems td[class] + td.na-bg,
div.dashboard-widget-topitems td[class] + td.normal-bg,
div.dashboard-widget-topitems td[class] + td.info-bg,
div.dashboard-widget-topitems td[class] + td.average-bg,
div.dashboard-widget-topitems td[class] + td.warning-bg,
div.dashboard-widget-topitems td[class] + td.high-bg,
div.dashboard-widget-topitems td[class] + td.disaster-bg {
border-left: 0 none; }
div.dashboard-widget-topitems .link-action {
white-space: pre-wrap; }
div.dashboard-widget-topitems z-bar-gauge {
min-width: 64px;
height: 20px; }
div.dashboard-widget-topitems z-sparkline {
min-width: 64px;
height: 20px;
}

Saludos