Skip to main content
This example shows a KPI chart with dynamic color styling using the Markdown visualization. Three KPI charts with conditional colors

​
Setup

This pattern uses a SQL CASE statement to assign a label based on the value of a metric. That label is then referenced in the Markdown as a CSS class to control styling. For example: 
CASE
  WHEN ${kpi_conditional_color.metric_value} < 0 THEN 'negative'
  WHEN ${kpi_conditional_color.metric_value} = 0 THEN 'neutral'
  WHEN ${kpi_conditional_color.metric_value} > 0 THEN 'positive'
END AS metric_class
Which would look like this in the workbook query: Conditional values in workbook query results

​
Example code

<style>
.kpi-visualization.negative {
  color: red;
}

.kpi-visualization.positive {
  color: green;
}

.kpi-visualization.neutral {
  color: gray;
}
</style>

<div class="kpi-visualization kpi-vertical-center {{result._first.kpi_conditional_color.metric_class.raw}}">
  <div class="kpi-markdown-wrapper kpi-align-center">
    <single-value label="Metric Value">
      <span>{{result._first.kpi_conditional_color.metric_value.value}}</span>
    </single-value>
  </div>
</div>