Diverging Bar Chart

A diverging bar chart splits positive and negative values around a zero baseline, ideal for variance against budget or plan. Categories are sorted by value so the biggest gains and shortfalls sit at opposite ends.

CustomChartDef diverging_bar_chart {
  label: 'Diverging Bar Chart'
  description: "A diverging bar chart splits positive and negative values around a zero baseline, ideal for variance against budget or plan."
  fields {
    field category {
      type: 'dimension'
      label: 'Category'
    }
    field value {
      type: 'measure'
      label: 'Value (positive or negative)'
    }
  }
  options {
    option positive_color {
      type: 'color-picker'
      label: 'Positive Color'
      default_value: '#2cb67f'
    }
    option negative_color {
      type: 'color-picker'
      label: 'Negative Color'
      default_value: '#e5484d'
    }
    option show_tooltip {
      type: 'toggle'
      label: 'Show tooltip'
      default_value: true
    }
  }
  template: @vgl
  {
    "data": {"values": @{values}},
    "mark": {
      "type": "bar",
      "tooltip": @{options.show_tooltip.value}
    },
    "encoding": {
      "y": {
        "field": @{fields.category.name},
        "type": "nominal",
        "sort": "-x",
        "title": null,
        "axis": {
          "labelOverlap": true,
          "domain": false,
          "ticks": false,
          "grid": false,
          "labelPadding": 8
        }
      },
      "x": {
        "field": @{fields.value.name},
        "type": "quantitative",
        "axis": {
          "format": @{fields.value.format},
          "formatType": "holisticsFormat",
          "domain": false,
          "tickColor": "#E5E7EB",
          "grid": true,
          "gridColor": "#F3F4F6",
          "gridOpacity": 1
        },
        "title": null
      },
      "color": {
        "condition": {
          "test": "datum['@{fields.value.name}'] >= 0",
          "value": @{options.positive_color.value}
        },
        "value": @{options.negative_color.value}
      }
    },
    "config": {
      "background": null,
      "view": {
        "stroke": null
      },
      "axis": {
        "labelFontSize": 12,
        "titleFontSize": 12,
        "labelFontWeight": 400,
        "titleFontWeight": 500
      },
      "legend": {
        "labelFontSize": 12,
        "titleFontSize": 12,
        "labelFontWeight": 400,
        "symbolStrokeWidth": 0
      },
      "bar": {
        "cornerRadius": 2
      }
    }
  }
  ;;
}