{"id":20941,"date":"2021-07-20T08:46:45","date_gmt":"2021-07-20T07:46:45","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=20941"},"modified":"2026-01-13T11:20:40","modified_gmt":"2026-01-13T11:20:40","slug":"interactive-small-multiples-with-dumbbell-charts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/interactive-small-multiples-with-dumbbell-charts\/","title":{"rendered":"Interactive small multiples with dumbbell charts"},"content":{"rendered":"

In the previous articles, I covered why you need to start using Dumbbell charts<\/a> and small-multiples (with boxplot jitter scatter)<\/a>.
\nIn this article, I will show you why and how to use small multiples with dumbbell charts to create effective charts.<\/p>\n

Let\u2019s get started.<\/p>\n

The challenge is to visualize and compare the men\u2019s and women\u2019s resting heart rates<\/a> from ages 18 to 55 (see table below). As you can see, any reader will experience challenges to easily interpret insights from the tables below.<\/p>\n

Men resting heart rate 💙<\/b><\/p>\n\n\n\n\n\n\n\n\n\n
Age<\/th>\n18 -25<\/th>\n26 -35<\/th>\n36 -45<\/th>\n46 – 55<\/th>\n56 -65<\/th>\n65+<\/th>\n<\/tr>\n
Athlete<\/td>\n49-55<\/td>\n49-54<\/td>\n50-56<\/td>\n50-57<\/td>\n51-56<\/td>\n50-55<\/td>\n<\/tr>\n
Excel’t<\/td>\n56-61<\/td>\n55-61<\/td>\n57-62<\/td>\n58-63<\/td>\n57-61<\/td>\n56-61<\/td>\n<\/tr>\n
Good<\/td>\n62-65<\/td>\n62-65<\/td>\n63-66<\/td>\n64-67<\/td>\n62-67<\/td>\n62-65<\/td>\n<\/tr>\n
Above av<\/td>\n66-69<\/td>\n66-70<\/td>\n67-70<\/td>\n68-71<\/td>\n68-71<\/td>\n66-69<\/td>\n<\/tr>\n
Average<\/td>\n70-73<\/td>\n71-74<\/td>\n71-75<\/td>\n72-76<\/td>\n72-75<\/td>\n70-73<\/td>\n<\/tr>\n
Below av<\/td>\n74-81<\/td>\n75-81<\/td>\n76-82<\/td>\n77-83<\/td>\n76-81<\/td>\n74-79<\/td>\n<\/tr>\n
Poor<\/td>\n82+<\/td>\n82+<\/td>\n83+<\/td>\n84+<\/td>\n82+<\/td>\n80+<\/td>\n<\/tr>\n<\/table>\n

 <\/p>\n

Women resting heart rate ❤️<\/b><\/p>\n\n\n\n\n\n\n\n\n\n
Age<\/th>\n18 -25<\/th>\n26 -35<\/th>\n36 -45<\/th>\n46 – 55<\/th>\n56 -65<\/th>\n65+<\/th>\n<\/tr>\n
Athlete<\/td>\n54-60<\/td>\n54-59<\/td>\n54-59<\/td>\n54-60<\/td>\n54-59<\/td>\n54-59<\/td>\n<\/tr>\n
Excel’t<\/td>\n61-65<\/td>\n60-64<\/td>\n60-64<\/td>\n61-65<\/td>\n60-64<\/td>\n60-64<\/td>\n<\/tr>\n
Good<\/td>\n66-69<\/td>\n65-68<\/td>\n65-69<\/td>\n66-69<\/td>\n65-68<\/td>\n65-68<\/td>\n<\/tr>\n
Above av<\/td>\n70-73<\/td>\n69-72<\/td>\n70-73<\/td>\n70-73<\/td>\n69-73<\/td>\n69-72<\/td>\n<\/tr>\n
Average<\/td>\n74-78<\/td>\n73-76<\/td>\n74-78<\/td>\n74-77<\/td>\n74-77<\/td>\n73-76<\/td>\n<\/tr>\n
Below av<\/td>\n79-84<\/td>\n77-82<\/td>\n79-84<\/td>\n78-83<\/td>\n78-83<\/td>\n77-84<\/td>\n<\/tr>\n
Poor<\/td>\n85+<\/td>\n83+<\/td>\n85+<\/td>\n84+<\/td>\n84+<\/td>\n84+<\/td>\n<\/tr>\n<\/table>\n

The first step is to identify the nature of the data and the objective. The data on both axes are categorical data (ordinal data): <\/p>\n

    \n
  • On the x-axis, there are seven categories ranging from athlete to poor physical condition. <\/li>\n
  • On the y-axis, there are four categories of age groups:\n
      \n
    • 18 – 25<\/li>\n
    • 26 – 35<\/li>\n
    • 36 – 45<\/li>\n
    • 46 – 55<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

      The main objective is to compare the difference between men and women, using age and the lowest\/highest heart rate measurements. I can create a chart with the entire men and women datasets; however, the result would be a crowded chart and difficult to gain insights. To solve this issue, a small multiple is a good option.<\/p>\n

      The question now is which chart to use? There are many chart types to compare categorical data visually, such as bars, columns, radial, and dumbbell. I choose to use the dumbbell chart type as it offers the capability to visualize many points on the same line that make the chart compact; keep in mind that space is a challenge to reckon with when using small multiples.<\/p>\n

      All I have to do now is to structure the data and feed it to the chart (see example below)<\/p>\n

      let data = [\r\n  { name: \"Athlete\", low: 54, high: 60 },\r\n  { name: \"Excel ‘t\", low: 61, high: 65 },\r\n  { name: \"Good\", low: 66, high: 69 },\r\n  { name: \"AboveAv\", low: 70, high: 73 },\r\n  { name: \"Average\", low: 74, high: 78 },\r\n  { name: \"BelowAv\", low: 79, high: 84 },\r\n  { name: \"Poor\", low: 85, high: 85 }\r\n];\r\nHighcharts.chart(\"containerW1825\", {\r\n  chart: {\r\n    type: \"dumbbell\"\r\n  },\r\n  legend: {\r\n    enabled: false\r\n  },\r\n  credits: {\r\n    enabled: false\r\n  },\r\n  title: {\r\n    text: \"Age 18-25\"\r\n  },\r\n  xAxis: {\r\n    type: \"category\"\r\n  },\r\n  yAxis: {\r\n    title: {\r\n      text: \"Resting Heart Rate\"\r\n    },\r\n    min: 40\r\n  },\r\n  series: [\r\n    {\r\n      name: \"Resting Heart Rate\",\r\n      data: data,\r\n      lowColor: \"#008000\",\r\n      marker: {\r\n        fillColor: \"#800000\" \/\/highColor\r\n      }\r\n    }\r\n  ]\r\n});\r\n<\/pre>\n
      Once all the charts are created, I gather them by gender (see charts below):
      \n <\/p>\n
      Men resting heart rate from 18 to 55<\/b><\/p>\n
      \n