Bar Chart with Running Average Line

CustomChartDef bar_chart_with_running_average_line {
  label: 'Bar Chart with Running Average Line'
  description: 'To overlay a running average line on a bar chart and compare each period against a smoothed trend.'
  fields {
    field dimension {
      label: 'Dimension'
      type: 'dimension'
      sort {
        apply_order: 1
        direction: 'asc'
      }
    }
    field value {
      label: 'Value'
      type: 'measure'
      sort {
        apply_order: 2
        direction: 'desc'
      }
    }
  }
  options {
    option tooltip {
      type: 'toggle'
      label: 'Show tooltip'
      default_value: true
    }
    option bar_color {
      type: 'color-picker'
      label: 'Bar color'
      default_value: '#255DD4'
    }
    option line_color {
      type: 'color-picker'
      label: 'Line color'
      default_value: '#E5484D'
    }
    option points_before {
      type: 'number-input'
      label: 'Points before'
      default_value: -3
    }
    option points_after {
      type: 'number-input'
      label: 'Points after'
      default_value: 0
    }
  }
  template: @vgl {
    "data": {"values": @{values}},
    "transform": [
      {
        "sort": [{"field": @{fields.dimension.name}}],
        "window": [{"op": "average", "field": @{fields.value.name}, "as": "avg"}],
        "frame": [@{options.points_before.value}, @{options.points_after.value}]
      }
    ],
    "layer": [
      {
        "mark": {"type": "bar", "tooltip": @{options.tooltip.value}, "color": @{options.bar_color.value}},
        "encoding": {
          "x": {
            "field": @{fields.dimension.name},
            "type": "temporal",
            "axis": {"format": @{fields.dimension.format}, "formatType": "holisticsFormat"}
          },
          "y": {
            "field": @{fields.value.name},
            "type": "quantitative",
            "axis": {"format": @{fields.value.format}, "formatType": "holisticsFormat"}
          }
        }
      },
      {
        "mark": {"type": "line", "tooltip": @{options.tooltip.value}, "color": @{options.line_color.value}, "strokeWidth": 2, "point": {"filled": true, "color": @{options.line_color.value}}},
        "encoding": {
          "x": {"field": @{fields.dimension.name}, "type": "temporal"},
          "y": {"field": "avg", "type": "quantitative"}
        }
      }
    ],
    "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": 0},
      "axisY": {"domain": false, "grid": true},
      "bar": {"cornerRadius": 2}
    }
  };;
}

View on GitHub

Legacy syntax

CustomChart {
	fields {
		field dimension {
			type: "dimension"
			label: "Dimension"
		}

		field measure {
			type: "measure"
			label: "Value"
		}
	}

	options {
		option tooltip {
			type: 'toggle'
			label: 'Show tooltip'
			default_value: true
		}
		option bar_color {
			type: 'color-picker'
			label: 'Bar color'
			default_value: '#00FFFF'
		}
		option line_color {
			type: 'color-picker'
			label: 'Line color'
			default_value: '#00FFFF'
		}
    option points_before {
      type: 'number-input'
      label: 'Points before'
      default_value: -3
    }
    option points_after {
      type: 'number-input'
      label: 'Points after'
      default_value: 0
    }    
	}

	template: @vgl {
		"data": {
			"values": @{values}
		},
    "transform": [
    {
      "sort": [{"field": @{fields.dimension.name}}],
      "window": [{"op": "average", "field": @{fields.measure.name}, "as": "avg"}],
      "frame": [@{options.points_before.value}, @{options.points_after.value}]
    }
    ],
    "layer": [
		{"mark": {
			"type": "bar",
			"tooltip": @{options.tooltip.value},
			"color": @{options.bar_color.value}
		},
		"encoding": {
			"x": {
				"field": @{fields.dimension.name}, 
				"type": "temporal", 
				"axis": {
					"labelAngle": -45,
					"format": @{fields.dimension.format},
					"formatType": "holisticsFormat"
				}
			},
			"y": {
				"field": @{fields.measure.name}, 
				"type": "quantitative",
				"axis": {
					"format": @{fields.measure.format},
					"formatType": "holisticsFormat"
				}
			}
		}
  },
    {"mark": {
			"type": "line",
			"tooltip": @{options.tooltip.value},
			"color": @{options.line_color.value}
		},
  "encoding": {
    "x": {"field": @{fields.dimension.name}, "type": "nominal"},
    "y": {"field": "avg", "type": "quantitative"}
  }
  
  }
  ]};;
}