Solved: [Chart] Bar Chart Configuring Questions (Fonts and...

jasuchung · ‎08-16-2023

I have defined stacked bar chart in my Splunk Enterprise Dashboard. I've been trying to solve this problem but I cannot solve them.. 😕 Please help me out.

These are the problems that I encountered:

1. As you can see in the line below `| eval PERCENTAGE = round(PERCENTAGE, 1)` I've rounded the data.
However, with data such as 7 and 10, ".0" gets dropped off for some reason. Our client strongly wants the data to be labelled in a uniform format. Is there a way to force natural number to appear as a integer form?

* 7 &10 (AS-IS) -> 7.0 & 10.0 (TO-BE)

2. Since the color of the Bar is Dark, I wanted to change the label in the bar to be White. I've wrote this line of code : `<option name="charting.fontColor">#ffffff</option>` However, this makes the whole font color including the ones in the axes.

3. I also want to change the label in the bar to be "Bold" and "Times New Roman" font-family. Is there a way to specify them?

This is my current code:

```XML

<row>
<panel>
<chart>
<search>
<query>
index = ~ (TRIMMED OF DUE TO PRIVACY ISSUE)
| eval PERCENTAGE = round(PERCENTAGE, 1)
| fields DOMAIN MONTHS PERCENTAGE
| chart values(PERCENTAGE) over MONTHS by DOMAIN
</query>
<earliest>earliest</earliest>
<latest>latest</latest>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">collapsed</option>
<option name="charting.axisY.abbreviation">none</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.chart">column</option>
<option name="charting.chart.showDataLabels">all</option>
<option name="charting.chart.stackMode">stacked</option>
<option name="charting.drilldown">none</option>
<option name="charting.legend.placement">right</option>
<option name="height">200</option>
<option name="refresh.display">progressbar</option>
<row>

```

Thank you

ITWhisperer · ‎08-18-2023

I don't think anything can be done about 1 as there isn't an option on column charts to specify the precision.

For 2 and 3, you can use CSS - give you chart panel an id e.g. boldtimes

  <row>
    <panel depends="$alwaysHide$">
      <html>
        <style>
          #boldtimes .highcharts-data-label text {
            font-weight: bold !important;
            font-family: "Times New Roman";
            fill: white !important;
          }
        </style>
      </html>
    </panel>
    <panel id="boldtimes">

View solution in original post

epescio_splunk · ‎08-23-2023

Hi @jasuchung ,

A workaround for issue 1 could be adding a javascript extension to your simpleXML dashboard (see docs at https://dev.splunk.com/enterprise/docs/developapps/visualizedata/usewebframework/modifydashboards/). Script below, based on @ITWhisperer example, will add one decimal to all data values displayed in chart without it (e.g. 10 -> 10.0)

require([
  'jquery',
  'splunkjs/mvc',
  'splunkjs/mvc/simplexml/ready!'
], function ($, mvc) {

    pollAvailability = () => {
        if (mvc.Components.hasInstance("boldtimes")) {
            // Chart loaded
            let content = $("#boldtimes g.highcharts-label.highcharts-data-label.highcharts-data-label-color-undefined tspan:not(:contains(.)):first-child");
            // Add the decimal to data values without it
            for (let i = 0; i < content.length; ++i) {
                let text = content[i].firstChild.textContent;
                text += ".0";
                content[i].firstChild.textContent = text;
            };

        } else {
            // Chart not loaded yet, retry in 200ms
            setTimeout(pollAvailability, 200);
        }
    };
    
    setTimeout(pollAvailability, 600);
});

ITWhisperer · ‎08-18-2023

I don't think anything can be done about 1 as there isn't an option on column charts to specify the precision.

For 2 and 3, you can use CSS - give you chart panel an id e.g. boldtimes

  <row>
    <panel depends="$alwaysHide$">
      <html>
        <style>
          #boldtimes .highcharts-data-label text {
            font-weight: bold !important;
            font-family: "Times New Roman";
            fill: white !important;
          }
        </style>
      </html>
    </panel>
    <panel id="boldtimes">

jasuchung · ‎08-20-2023

Thank u 🙂 Wish there was a way to make it in to a text just for labeling data 😿

MHC1 · ‎08-17-2023

I have the same problem too. I hope there is a solution for it.

[Chart] Bar Chart Configuring Questions (Fonts and Formats)

chart

dashboard

panel

simple XML

New Case Study Shows the Value of Partnering with Splunk Academic Alliance

How to Monitor Google Kubernetes Engine (GKE)

Index This | How can you make 45 using only 4?