Reporting

How do I center the sparkline column in a chart/table?

damucka
Builder

Hello,

I have the following search for my sparkling line chart / table:

index=mlbso LogReplay* sourcetype=$SYSID$_hanatraces  earliest=-30m | chart  count sparkline by host | rename count as "Log replays" sparkline as "Last 30 min"| sort -"Log replays"

Everything is working fine, but my last column with the sparkling line chart is left-adjusted, which I do not like.

How would I center the sparkling chart in my last column?

Kind Regards,
Kamil

Tags (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@damucka

You can achieve this by CSS. Can you please try below XML for reference.

<dashboard>
  <label>Sparkline</label>
  <row>
    <panel>
      <table id="mytable">
        <search>
          <query>index="_internal"  | chart  count sparkline by host | rename count as "Log replays" sparkline as "Last 30 min"| sort -"Log replays"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
  <row>
    <html>
      <style>
        .sparkline {
          text-align: center !important;
        }
#mytable table th:nth-child(3) {
          text-align: center !important;
        }
      </style>
    </html>
  </row>
</dashboard>

Thanks

View solution in original post

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@damucka

You can achieve this by CSS. Can you please try below XML for reference.

<dashboard>
  <label>Sparkline</label>
  <row>
    <panel>
      <table id="mytable">
        <search>
          <query>index="_internal"  | chart  count sparkline by host | rename count as "Log replays" sparkline as "Last 30 min"| sort -"Log replays"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
  <row>
    <html>
      <style>
        .sparkline {
          text-align: center !important;
        }
#mytable table th:nth-child(3) {
          text-align: center !important;
        }
      </style>
    </html>
  </row>
</dashboard>

Thanks

0 Karma

damucka
Builder

Kamlesh,

Thank you, it works.
The only thing is that now the sparkling line is centered, but the column header still left-adjusted.
How would I center also this one?

Kind Regards,
Kamil

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@damucka
I have updated my answer. Please check.

Thanks

0 Karma

damucka
Builder

Thank you, it works.
Kind Regards,
Kamil

0 Karma
Get Updates on the Splunk Community!

Splunk + ThousandEyes: Correlate frontend, app, and network data to troubleshoot ...

 Are you tired of troubleshooting delays caused by siloed frontend, application, and network data? We've got a ...

Splunk Observability for AI

Don’t miss out on an exciting Tech Talk on Splunk Observability for AI!Discover how Splunk’s agentic AI ...

🔐 Trust at Every Hop: How mTLS in Splunk Enterprise 10.0 Makes Security Simpler

From Idea to Implementation: Why Splunk Built mTLS into Splunk Enterprise 10.0  mTLS wasn’t just a checkbox ...