Candlestick Chart

Candlestick chart is essentially multiple box plots placed next to one another into a sequence. It is often employed in to visualize price movement of financial instruments, such as forex, stock, bonds...

CustomChartDef candlestick_chart {
  label: 'Candlestick Chart'
  description: 'To visualize the open, high, low, and close price movement of financial instruments over time.'
  fields {
    field date {
      label: 'Date'
      type: 'dimension'
      data_type: 'date'
      sort {
        apply_order: 1
        direction: 'asc'
      }
    }
    field low {
      label: 'Low'
      type: 'measure'
      data_type: 'number'
      sort {
        apply_order: 2
        direction: 'asc'
      }
    }
    field high {
      label: 'High'
      type: 'measure'
      data_type: 'number'
      sort {
        apply_order: 3
        direction: 'asc'
      }
    }
    field open {
      label: 'Open'
      type: 'measure'
      data_type: 'number'
      sort {
        apply_order: 4
        direction: 'asc'
      }
    }
    field close {
      label: 'Close'
      type: 'measure'
      data_type: 'number'
      sort {
        apply_order: 5
        direction: 'asc'
      }
    }
  }

  	options {
		option tooltip {
			type: 'toggle'
			label: 'Show tooltip'
			default_value: true
		}
		option green_candle {
			type: 'color-picker'
			label: 'Green candlestick'
			default_value: 'green'
		}
    option red_candle {
			type: 'color-picker'
			label: 'Red candlestick'
			default_value: 'red'
		}
	}

  template: @vgl
  {
    "data": {
      "values": @{values}
    },
    "layer": [
      {
        "mark": "rule",
        "encoding": {
          "y": {"field": @{fields.low.name}},
          "y2": {"field": @{fields.high.name}}
        }
      },
      {
        "mark": {
          "type": "bar",
          "tooltip": @{options.tooltip.value}
        },
        "encoding": {
          "y": {"field": @{fields.open.name}},
          "y2": {"field": @{fields.close.name}}
        }
      }
    ],
    "encoding": {
      "x": {
        "type": "temporal",
        "field": @{fields.date.name}
      },
      "y": {
        "axis": {
          "title": "Price"
        },
        "type": "quantitative",
        "scale": {
          "zero": false
        }
      },
      "color": {
        "condition": {
          "test": "datum['@{fields.open.name}'] < datum['@{fields.close.name}']",
          "value": @{options.green_candle.value}
        },
        "value": @{options.red_candle.value}
      }
    },
    "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, "format": "%b %Y", "labelAngle": 0},
      "axisY": {"domain": false, "grid": true}
    }
  };;
}

View on GitHub

Legacy syntax

CustomChart {
  fields {
    field date {
      type: "dimension"
      label: "Date field"
    }
    field low {
      type: "dimension"
      label: "Low price"
    }
    field high {
      type: "dimension"
      label: "High price"
    }
    field open {
      type: "dimension"
      label: "Open price"
    }
    field close {
      type: "dimension"
      label: "Close price"
    }
  }

  	options {
		option tooltip {
			type: 'toggle'
			label: 'Show tooltip'
			default_value: true
		}
		option green_candle {
			type: 'color-picker'
			label: 'Green candlestick'
			default_value: 'green'
		}
    option red_candle {
			type: 'color-picker'
			label: 'Red candlestick'
			default_value: 'red'
		}
	}

  template: @vgl
  {
    "data": {
      "values": @{values}
    },
    "layer": [
      {
        "mark": "rule",
        "encoding": {
          "y": {"field": @{fields.low.name}},
          "y2": {"field": @{fields.high.name}}
        }
      },
      {
        "mark": {
          "type": "bar",
          "tooltip": @{options.tooltip.value}
        },
        "encoding": {
          "y": {"field": @{fields.open.name}},
          "y2": {"field": @{fields.close.name}}
        }
      }
    ],
    "encoding": {
      "x": {
        "axis": {
          "format": "%m/%d",
          "labelAngle": -45
        },
        "type": "temporal",
        "field": @{fields.date.name},
      },
      "y": {
        "axis": {
          "title": "Price"
        },
        "type": "quantitative",
        "scale": {
          "zero": false
        }
      },
      "color": {
        "condition": {
          "test": "datum.@{fields.open.name} < datum.@{fields.close.name}",
          "value": @{options.green_candle.value}
        },
        "value": @{options.red_candle.value}
      }
    }
  };;
}