Visualization to mimic Atlassian Statuspage

[DEADBEEF]

I'm trying to create a simple status page visualization that mimics the style I've seen by Atlassian Statuspage.   You can see it on the status page for Discord and Wiz.

Currently, I have a timechart and if status=1 then it's up, but if status=0 then it's down.  When the app is down, there is simply no bar on the graph.  How do I "force" a value for the bar to appear but then color each bar based on the status value.  I think I'm missing something really simple and hoping someone can point me in the right direction.

Current SPL

index=main app="myApp"
| eval status=if(isnull(status), "0", status)
| timechart span=1m max(status) by app

Current XML

<dashboard version="1.1" theme="light">
  <label>Application Status</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=main app="myApp"
| eval status=if(isnull(status), "0", status)
| timechart span=1m max(status) by app</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisLabelsY.majorUnit">1</option>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.maximumNumber">1</option>
        <option name="charting.axisY.minimumNumber">0</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.columnSpacing">0</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.seriesColors">[0x459240]</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">none</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>

visualize.png

[ITWhisperer]

Format your chart as stacked

| rename myApp as up
| eval down=1-up