Re: Change Column Chart Width to Fit Trellis Side ...

yvassilyeva · ‎06-23-2021

Hi,

Is there a way to change the width of column charts? I have 4 trellis column charts that are currently displayed vertically. What i'd like to do is to display two of them side by side.

What i have:

What i would like to have:

Thank you very much in advance.

kamlesh_vaghela · ‎06-23-2021

@yvassilyeva

Can you please share you sample XML?

KV

yvassilyeva · ‎06-24-2021

Hi,

here is XML for the panel with 4 trellis charts:

  <row>
    <panel>
      <title>Categories </title>
      <chart>
        <search>
          <query>my query</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">1</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.showDataLabels">all</option>
        <option name="charting.chart.stackMode">stacked</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.size">large</option>
        <option name="trellis.splitBy">unitofbusiness</option>
      </chart>
    </panel>
  </row>

Thank you!

kamlesh_vaghela · ‎06-24-2021

@yvassilyeva

Can you please try this?

<row>
    <panel>
      <title>Categories</title>
      <chart>
        <search>
          <query>index=_internal | timechart span=10m useother=f count by sourcetype where max in top4</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">1</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.showDataLabels">all</option>
        <option name="charting.chart.stackMode">stacked</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.legend.placement">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">0</option>
        <option name="trellis.size">medium</option>
        <option name="trellis.splitBy">unitofbusiness</option>
      </chart>
    </panel>
  </row>

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

yvassilyeva · ‎06-24-2021

Found the solution provided by @niketn

      <html depends="$alwaysHideCSSForTrellis$">
        <style>
          .facets-container .viz-facet {
              height: 500px !important;
              width: 850px !important;
              float: left;
              padding: 35px 15px 30px 50px;
          }        
        </style>
      </html>

yvassilyeva · ‎06-24-2021

I see you changed the size of trellis. It does solve the issue, but that would be too small. Is there a change in XML that corrects the width of the panel to fit two charts side by side?

I don't believe anything should change in the query

Change Column Chart Width to Fit Trellis Side by Side

chart

simple XML

Detecting Remote Code Executions With the Splunk Threat Research Team

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

.conf24 | Session Scheduler is Live!!