Bar Chart with Average Line

CustomChartDef bar_chart_with_average_line {
  label: 'Bar Chart with Average Line'
  description: 'To compare bar values against a horizontal average line across the whole series.'
  fields {
    field dimension {
      label: 'Dimension'
      type: 'dimension'
      sort {
        apply_order: 1
        direction: 'asc'
      }
    }
    field series {
      label: 'Series'
      type: 'dimension'
      sort {
        apply_order: 2
        direction: 'asc'
      }
    }
    field value {
      label: 'Value'
      type: 'measure'
      sort {
        apply_order: 3
        direction: 'desc'
      }
    }
  }
  options {
  }
  template: @vgl {
    "data": {"values": @{values}},
    "layer": [
      {
        "mark": {"type": "bar", "tooltip": true},
        "encoding": {
          "x": {
            "field": @{fields.dimension.name},
            "axis": {"format": @{fields.dimension.format}, "formatType": "holisticsFormat"}
          },
          "y": {
            "field": @{fields.value.name},
            "type": "quantitative",
            "axis": {"format": @{fields.value.format}, "formatType": "holisticsFormat"}
          },
          "xOffset": {"field": @{fields.series.name}},
          "color": {
            "field": @{fields.series.name},
            "legend": {"title": null}
          }
        }
      },
      {
        "mark": {"type": "rule", "strokeDash": [4, 4], "color": "#E5484D", "size": 2, "tooltip": true},
        "encoding": {
          "y": {"aggregate": "mean", "field": @{fields.value.name}, "type": "quantitative"},
          "tooltip": [{"aggregate": "mean", "field": @{fields.value.name}, "type": "quantitative", "title": "Average", "format": @{fields.value.format}, "formatType": "holisticsFormat"}]
        }
      }
    ],
    "config": {
      "background": null,
      "view": {"stroke": null},
      "font": "Inter",
      "axis": {
        "title": null,
        "ticks": false,
        "labelPadding": 10,
        "labelFontSize": 11,
        "labelColor": "#858B9E",
        "titleColor": "#858B9E",
        "labelOverlap": "parity",
        "gridDash": [8, 3],
        "gridColor": "#F4F6F8",
        "domainColor": "#bec1cb"
      },
      "axisX": {"grid": false, "labelAngle": -45},
      "axisY": {"domain": false, "grid": true},
      "legend": {"orient": "bottom", "title": null, "labelFontSize": 11, "labelColor": "#858B9E", "symbolType": "circle", "symbolStrokeWidth": 0},
      "bar": {"cornerRadius": 2}
    }
  };;
}

View on GitHub

Legacy syntax

CustomChart {
  fields {
    field x {
      type: 'dimension'
    }
    field legend {
      type: 'dimension'
    }
    field y {
      type: 'measure'
    }
  }
  options {
  }
  template: @vgl {
    "data": {"values": @{values}},
    "layer": [{
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": @{fields.x.name},
          "axis": {
            "format": @{fields.x.format},
            "formatType": "holisticsFormat",
            "labelAngle": 45
          }
        },
        "y": {
          "field": @{fields.y.name},
          "type": "quantitative",
          "axis": {
            "format": @{fields.y.format},
            "formatType": "holisticsFormat"
          }
        },
        "xOffset": {
          "field": @{fields.legend.name}
        },
        "color": {
          "field": @{fields.legend.name}
        },
      }
    }, {
      "mark": "rule",
      "encoding": {
        "y": {
          "aggregate": "mean",
          "field": @{fields.y.name},
          "type": "quantitative"
        },
        "color": {"value": "firebrick"},
        "size": {"value": 3}
      }
    }],
  };;
}