Skip to content

Mixed Charts

You can mix and match charts together. If both chart types are drawn on the XY axis, you can display different dataseries next to each other.

Basic Example

Below we display precipitation (as bar chart) and temperature (as a line chart) together. We also add interactive crosshair to inspect data in more details:

Monthmax_tempmin_tempSunshineRainfall
January8.473.3644.4243.93
February9.213.2266.1139.85
March12.074.66109.7136.52
April15.356.02152.8538.63
May18.599.06198.6843.99
June21.3712.04198.5549.34
July23.7513.93209.2436.30
August23.3114.08198.0253.02
September20.2911.57140.5852.38
October15.838.9999.6658.34
November11.556.0958.5059.85
December8.853.7750.0950.71

Source: Met Office. London, Greenwich avg for 1991-2020. Temperatures in °C, rainfall in mm. sunshine in hours.

sqlseal
TABLE t = table(0)

CHART {
	xAxis: { type: 'category' },
	yAxis: [
		{
	      type: 'value',
	      name: 'Temperature',
	      min: 0,
	      max: 25,
	      position: 'left',
	      axisLabel: {
	        formatter: '{value} °C'
	      }
	    },
	    {
		    type: 'value',
		      name: 'Rainfall',
		      min: 0,
		      max: 180,
		      position: 'right',
		      axisLabel: {
		        formatter: '{value} mm'
		      }
	    }
	],
	series: [
		{
	      name: 'Temperature',
	      type: 'line',
	      smooth: true,
	      yAxisIndex: 0,
	    },
	    {
	      name: 'Rainfall',
	      type: 'bar',
	      yAxisIndex: 1,
	      encode: { y: 'rainfall' },
      }
	    
	],
	tooltip: {
	    trigger: 'axis',
	    axisPointer: { type: 'cross' }
  },
  legend: {},
}
SELECT month, max_temp, rainfall FROM t

mixed charts