Dashboards & Visualizations

How can I change the color for the entire column graph and not by each value?

johnward4
Communicator

I'm trying to see if there's a way to change the color for the entire column graph and the examples I've seen/tried so far are for specifying a color by value. This is purely for aesthetic reasons, trying to create a consistent theme to my dashboard.

Thanks in advance

0 Karma
1 Solution

493669
Super Champion

I don't think you can override chart colors either using css .
but you can do a trick: use charting.fieldColors give the column name and hex color code which will give a consistent theme to your dashboard.
Try this run anywhere search:

<dashboard>
  <label>ColorColumn Chart</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal|stats count by source</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
          <option name="charting.fieldColors">{"count": 0xFF0000}</option>
          <option name="charting.chart">column</option>
          <option name="charting.legend.placement">right</option>
       </chart>
    </panel>
  </row>
</dashboard>

if you want you can change font color and background color as well using <option name="charting.fontColor"> and <option name="charting.backgroundColor">
alt text

View solution in original post

0 Karma

mayurr98
Super Champion

hey I think you should use <option name="charting.seriesColors">[0xFF0000]</option> as in charting.fieldColors you will have to specify all the field name with hex color codes.
So if you have multiple fields then you should use only <option name="charting.seriesColors">[0xFF0000]</option> and this will do for all the fields.

Try this run anywhere XML

<dashboard>
  <label>ColorColumn Chart</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal|stats count values(bytes) as s by source</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.seriesColors">[0xFF0000]</option>
        <option name="charting.legend.placement">right</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</dashboard>

let me know if this helps!

0 Karma

493669
Super Champion

I don't think you can override chart colors either using css .
but you can do a trick: use charting.fieldColors give the column name and hex color code which will give a consistent theme to your dashboard.
Try this run anywhere search:

<dashboard>
  <label>ColorColumn Chart</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal|stats count by source</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
          <option name="charting.fieldColors">{"count": 0xFF0000}</option>
          <option name="charting.chart">column</option>
          <option name="charting.legend.placement">right</option>
       </chart>
    </panel>
  </row>
</dashboard>

if you want you can change font color and background color as well using <option name="charting.fontColor"> and <option name="charting.backgroundColor">
alt text

0 Karma

johnward4
Communicator

Thank You!!

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...