Solved: chart label

jip31 · ‎04-02-2018

HI
i want to format my label charts but it dont works
do i have to add this code in a specific place??? beetween tags???hi
i put a css file in C:\Program Files\Splunk\etc\apps\Splunk_TA_windows\static
and i added this code in my html file but it doesn t works
here is the css file content:
text-label{
font-size: 20px !important;
fill: black !important;
font-weight: bold!important;
}
what is the problem please???
thanks

niketn · ‎04-02-2018

@jip31, if you are using HTML Dashboard, chart title <h3> section can be selected .panel-head h3 selector. For the following example I have used chart with id="myPieChart" to apply CSS Style override only to that Chart. Also I have used a html panel (i.e. dashboard-element html in Splunk which is always hidden using tokenDependencies with $alwaysHideCSSStyleHTML$ which is never set

<div id="row1" class="dashboard-row dashboard-row1">
    <div id="panel1" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="element1" class="dashboard-element html" style="width: 100%">
                    <div class="panel-body html">
                            <style>
      #myPieChart .panel-head h3{
        font-size: 20px !important;
        fill: black !important;
        font-weight: bold!important;            
      }
    </style>
                    </div>
                </div>
            </div>
            <div class="panel-element-row">
                <div id="myPieChart" class="dashboard-element chart" style="width: 100%">
                    <div class="panel-head">
                        <h3>Splunkd Errors Pie Chart</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Same approach for Simple XML would be to use .dashboard-element-title CSS Selector. You can use Browser Inspector Tool to find the DOM element (spath/selector) to override CSS.

  <row>
    <panel>
      <html depends="$alwaysHideCSSStyleHTML$">
        <style>
          #myPieChart .dashboard-element-title{
            font-size: 20px !important;
            fill: black !important;
            font-weight: bold!important;            
          }
        </style>
      </html>
      <chart id="myPieChart">
        <title>Splunkd Errors Pie Chart</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO" | top 5 component showperc=f</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>

You should get Splunk Dashboard Examples app from Splunkbase to check out Custom Layout Dark Example to understand CSS override.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

jip31 · ‎04-02-2018

thanks a lot

niketn · ‎04-02-2018

@jip31, if you are using HTML Dashboard, chart title <h3> section can be selected .panel-head h3 selector. For the following example I have used chart with id="myPieChart" to apply CSS Style override only to that Chart. Also I have used a html panel (i.e. dashboard-element html in Splunk which is always hidden using tokenDependencies with $alwaysHideCSSStyleHTML$ which is never set

<div id="row1" class="dashboard-row dashboard-row1">
    <div id="panel1" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="element1" class="dashboard-element html" style="width: 100%">
                    <div class="panel-body html">
                            <style>
      #myPieChart .panel-head h3{
        font-size: 20px !important;
        fill: black !important;
        font-weight: bold!important;            
      }
    </style>
                    </div>
                </div>
            </div>
            <div class="panel-element-row">
                <div id="myPieChart" class="dashboard-element chart" style="width: 100%">
                    <div class="panel-head">
                        <h3>Splunkd Errors Pie Chart</h3>
                    </div>
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Same approach for Simple XML would be to use .dashboard-element-title CSS Selector. You can use Browser Inspector Tool to find the DOM element (spath/selector) to override CSS.

  <row>
    <panel>
      <html depends="$alwaysHideCSSStyleHTML$">
        <style>
          #myPieChart .dashboard-element-title{
            font-size: 20px !important;
            fill: black !important;
            font-weight: bold!important;            
          }
        </style>
      </html>
      <chart id="myPieChart">
        <title>Splunkd Errors Pie Chart</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO" | top 5 component showperc=f</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>

You should get Splunk Dashboard Examples app from Splunkbase to check out Custom Layout Dark Example to understand CSS override.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

chart label

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life