Combo Chart
Combo Chart
A combo chart is a combination of two or more chart types, such as a line chart and a bar chart, to visualize different data series together. This allows for better comparison and understanding of the data.
export function ComboChart(): ReactElement {
const options: AgChartOptions = useMemo(() => {
return {
data,
title: {
text: 'Flight Time Analysis',
},
series: [
{
type: 'bar',
xKey: 'month',
yKey: 'time',
yName: 'Monthly Flight Time',
},
{
type: 'line',
xKey: 'month',
yKey: 'time',
yName: 'Trend',
marker: {
enabled: true,
},
},
],
axes: [],
theme,
};
}, [data]);
return <AgCharts options={options} />;
}
- The
series
array now contains two series: a bar chart and a line chart. - The
xKey
andyKey
properties define the data mapping for each series.
This should look really familiar since we have already built a bar chart and a line chart in previous sections.
Now, let's define the axes for our combo chart to enhance readability and provide context for the data.
export function ComboChart(): ReactElement {
const data = useRollupData();
const options: AgChartOptions = useMemo(() => {
return {
// code omitted for brevity
axes: [
{
type: 'number',
position: 'left',
title: {
text: 'Flight Time (hours)',
},
},
{
type: 'category',
position: 'bottom',
label: {
formatter: (params) => data[params.index].label,
},
},
],
theme,
};
}, [data]);
return <AgCharts options={options} />;
}
- The
axes
property is added to define the axes for the combo chart. - The left axis is a number axis for the flight time, and the bottom axis is a category axis for the months.
Challenge
Open the Challenge on Stackblitz
For this challenge, you will combine the line and bar charts to create a combo chart. Here’s what you need to do:
- Create a series of type
'bar'
:- Set the
xKey
to'month'
. - Set the
yKey
to'time'
. - Set the
yName
to'Monthly Flight Time'
.
- Set the
- Create a series of type
'line'
:- Set the
xKey
to'month'
. - Set the
yKey
to'time'
. - Set the
yName
to'Trend'
. - Enable markers for the line series.
- Set the
- Define the axes:
- The left axis should be a number axis with the title
'Flight Time (hours)'
. - The bottom axis should be a category axis with labels formatted to show the month names.
- The left axis should be a number axis with the title