LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Bubble Chart

Basic Bubble Chart

A bubble chart is a scatter plot where each point is represented by a bubble, with the size of the bubble indicating a third dimension of data. This allows for visualization of three variables in a two-dimensional space.

export default function BubbleChart(): ReactElement {
  const options: AgChartOptions = useMemo(
    () => ({
      data,
      series: [
        {
          type: 'bubble',
          xKey: 'flight_count',
          yKey: 'total_time',
          sizeKey: 'avg_time',
        },
      ],
    }),
    []
  );

  return <AgCharts options={options} />;
}
  • The series type is set to bubble to render a bubble chart.
  • The xKey and yKey properties map the data to the x and y axes.
  • The sizeKey property determines the size of each bubble.

Labels and Tooltips

We can enhance the bubble chart by adding axis labels and tooltips to provide more context about the data.

export function BubbleChart(): ReactElement {
  const options: AgChartOptions = useMemo(
    () => ({
      data,
      series: [
        {
          type: 'bubble',
          xKey: 'flight_count',
          yKey: 'total_time',
          sizeKey: 'avg_time',
          xName: 'Number of Flights',
          yName: 'Total Flight Time',
          sizeName: 'Average Flight Time',
          title: 'Aircraft',
          tooltip: {
            renderer: (params) => {
              const datum = params.datum as AircraftStats;
              return {
                title: datum.aircraft_id,
                content: [
                  `Number of Flights: ${datum.flight_count}`,
                  `Total Time: ${datum.total_time.toFixed(1)} hours`,
                  `Average Time: ${datum.avg_time.toFixed(1)} hours`,
                ].join('<br />'),
              };
            },
          },
        },
      ],
      axes: [
        {
          type: 'number',
          position: 'left',
          title: {
            text: 'Total Flight Time (hours)',
          },
        },
        {
          type: 'number',
          position: 'bottom',
          title: {
            text: 'Number of Flights',
          },
        },
      ],
      theme,
    }),
    [data]
  );

  return <AgCharts options={options} />;
}

Challenge

Open the Challenge on Stackblitz

For this challenge, you will create a bubble chart to analyze aircraft usage. Here's what you need to do:

  1. Create a series of type 'bubble':
    • Set the xKey to 'flight_count' to show the number of flights.
    • Set the yKey to 'total_time' to show the total flight time.
    • Set the sizeKey to 'avg_time' to show the average flight time.
    • Add appropriate axis labels and tooltips to display the data clearly.

Solution

View the Solution on Stackblitz