Arrow plot coloured by size of change

Dumbbell graphs display the relationship between two data points for multiple categories by connecting them with a line. It effectively shows the difference or change between these two values for each item, allowing for easy comparison of magnitudes and variations across the dataset. This visualization is useful for highlighting shifts or disparities.


Economist GGPlot Excel Paul Tol Black And White Solarized Stata Tableau Wall Street CanvasXpress
Edit this code: edit & runin place edit inJSFiddle edit inCodePen 
<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Use a data frame (2D-array) for the graph
      var data = 

      // Create the configuration for the graph
      var config = {
         "graphType" : "Dumbbell",
         "dumbbellType" : "arrow",
         "dumbbellArrowDirection" : "order",
         "theme" : "classic",
         "colorScheme" : "User",
         "colors" : [
            "#6b6b6b",
            "#009E73"
         ],
         "title" : "Open-access share of papers by field",
         "subtitle" : "Share of papers published open access, grey 2014 to green 2024 (%); shaded: majority open access",
         "xAxis" : [
            "2014",
            "2024"
         ],
         "xAxisTitle" : "Share open access (%)",
         "connectByColor" : "#009E73",
         "connectByWidth" : 3,
         "dataPointSizeScaleFactor" : 0.7,
         "setMinX" : 0,
         "setMaxX" : 70,
         "showLegend" : false,
         "smpLabelInterval" : 1,
         "segregateSamplesBy" : [
            "Domain"
         ],
         "stripBackgroundColor" : "rgba(255,255,255,0)",
         "stripTextAlign" : "left",
         "stripBackgroundBorderColor" : "rgba(255,255,255,0)",
         "layoutTopology" : "4X1",
         "decorations" : {
            "range" : [
               {
                  "value" : 50,
                  "value2" : 70,
                  "color" : "rgba(0,158,115,0.10)",
                  "tooltip" : "Majority open access"
               }
            ],
            "text" : [
               {
                  "value" : 38,
                  "smpId" : 4,
                  "panel" : 3,
                  "label" : "Over 50% open access ▶",
                  "color" : "#009E73",
                  "labelScaleFontFactor" : 0.8
               }
            ]
         },
         "citation" : "Source: synthetic data for illustration"
      }

      // Event used to create graph (optional)
      var events = false

      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

    </script>

  </body>

</html>
Edit this code: edit & runin place edit inJSFiddle edit inCodePen 
<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Create the data for the graph
      var data = {
         "y" : {
            "vars" : [
               "2014",
               "2024"
            ],
            "smps" : [
               "Immunology",
               "Neuroscience",
               "Pharmacology",
               "Biochemistry",
               "Agronomy",
               "Psychology",
               "Economics",
               "Chemistry",
               "Materials",
               "Physics",
               "Computer science",
               "Mathematics",
               "Nursing",
               "Medicine",
               "Dentistry"
            ],
            "data" : [
               [
                  40,
                  38,
                  39,
                  39,
                  33,
                  43,
                  18,
                  26,
                  25,
                  19,
                  16,
                  16,
                  36,
                  35,
                  28
               ],
               [
                  46.8,
                  47.8,
                  47.2,
                  45.8,
                  42.6,
                  57.3,
                  30,
                  32.3,
                  30.6,
                  23.7,
                  21,
                  19.9,
                  47.5,
                  45.6,
                  38.8
               ]
            ]
         },
         "x" : {
            "Change" : [
               "5 to 10 points",
               "5 to 10 points",
               "5 to 10 points",
               "5 to 10 points",
               "5 to 10 points",
               "More than 10 points",
               "More than 10 points",
               "5 to 10 points",
               "5 to 10 points",
               "5 points or less",
               "5 points or less",
               "5 points or less",
               "More than 10 points",
               "More than 10 points",
               "More than 10 points"
            ],
            "Domain" : [
               "1. Life sciences",
               "1. Life sciences",
               "1. Life sciences",
               "1. Life sciences",
               "1. Life sciences",
               "2. Social sciences",
               "2. Social sciences",
               "3. Physical sciences",
               "3. Physical sciences",
               "3. Physical sciences",
               "3. Physical sciences",
               "3. Physical sciences",
               "4. Health",
               "4. Health",
               "4. Health"
            ]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Dumbbell",
         "dumbbellType" : "arrow",
         "dumbbellArrowDirection" : "order",
         "theme" : "classic",
         "colorScheme" : "User",
         "colors" : [
            "#6b6b6b",
            "#009E73"
         ],
         "title" : "Open-access share of papers by field",
         "subtitle" : "Share of papers published open access, grey 2014 to green 2024 (%); shaded: majority open access",
         "xAxis" : [
            "2014",
            "2024"
         ],
         "xAxisTitle" : "Share open access (%)",
         "connectByColor" : "#009E73",
         "connectByWidth" : 3,
         "dataPointSizeScaleFactor" : 0.7,
         "setMinX" : 0,
         "setMaxX" : 70,
         "showLegend" : false,
         "smpLabelInterval" : 1,
         "segregateSamplesBy" : [
            "Domain"
         ],
         "stripBackgroundColor" : "rgba(255,255,255,0)",
         "stripTextAlign" : "left",
         "stripBackgroundBorderColor" : "rgba(255,255,255,0)",
         "layoutTopology" : "4X1",
         "decorations" : {
            "range" : [
               {
                  "value" : 50,
                  "value2" : 70,
                  "color" : "rgba(0,158,115,0.10)",
                  "tooltip" : "Majority open access"
               }
            ],
            "text" : [
               {
                  "value" : 38,
                  "smpId" : 4,
                  "panel" : 3,
                  "label" : "Over 50% open access ▶",
                  "color" : "#009E73",
                  "labelScaleFontFactor" : 0.8
               }
            ]
         },
         "citation" : "Source: synthetic data for illustration"
      }

      // Event used to create graph (optional)
      var events = false

            // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

    </script>

  </body>

</html>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-dumbbell16-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/r/cX-dumbbell16-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
smpAnnot=x,
citation="Source: synthetic data for illustration",
colorScheme="User",
colors=list("#6b6b6b", "#009E73"),
connectByColor="#009E73",
connectByWidth=3,
dataPointSizeScaleFactor=0.7,
decorations=list(range=list(list(color="rgba(0,158,115,0.10)", tooltip="Majority open access", value=50, value2=70)), text=list(list(color="#009E73", label="Over 50% open access ▶", labelScaleFontFactor=0.8, panel=3, smpId=4, value=38))),
dumbbellArrowDirection="order",
dumbbellType="arrow",
graphType="Dumbbell",
layoutTopology="4X1",
segregateSamplesBy=list("Domain"),
setMaxX=70,
setMinX=0,
showLegend=FALSE,
smpLabelInterval=1,
stripBackgroundBorderColor="rgba(255,255,255,0)",
stripBackgroundColor="rgba(255,255,255,0)",
stripTextAlign="left",
subtitle="Share of papers published open access, grey 2014 to green 2024 (%); shaded: majority open access",
theme="classic",
title="Open-access share of papers by field",
xAxis=list(2014, 2024),
xAxisTitle="Share open access (%)"
)
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser

if __name__ == "__main__":
  # Define the chart with its data and configuration
  chart: CanvasXpress = CanvasXpress(
    render_to = "dumbbell16",
    data = {
      "y": {
        "vars": ["2014", "2024"],
        "smps": ["Immunology", "Neuroscience", "Pharmacology", "Biochemistry", "Agronomy", "Psychology", "Economics", "Chemistry", "Materials", "Physics", "Computer science", "Mathematics", "Nursing", "Medicine", "Dentistry"],
        "data": [
          [40, 38, 39, 39, 33, 43, 18, 26, 25, 19, 16, 16, 36, 35, 28],
          [46.8, 47.8, 47.2, 45.8, 42.6, 57.3, 30, 32.3, 30.6, 23.7, 21, 19.9, 47.5, 45.6, 38.8]
        ]
      },
      "x": {
        "Change": ["5 to 10 points", "5 to 10 points", "5 to 10 points", "5 to 10 points", "5 to 10 points", "More than 10 points", "More than 10 points", "5 to 10 points", "5 to 10 points", "5 points or less", "5 points or less", "5 points or less", "More than 10 points", "More than 10 points", "More than 10 points"],
        "Domain": ["1. Life sciences", "1. Life sciences", "1. Life sciences", "1. Life sciences", "1. Life sciences", "2. Social sciences", "2. Social sciences", "3. Physical sciences", "3. Physical sciences", "3. Physical sciences", "3. Physical sciences", "3. Physical sciences", "4. Health", "4. Health", "4. Health"]
      }
    },
    config = {
      "graphType": "Dumbbell",
      "dumbbellType": "arrow",
      "dumbbellArrowDirection": "order",
      "theme": "classic",
      "colorScheme": "User",
      "colors": ["#6b6b6b", "#009E73"],
      "title": "Open-access share of papers by field",
      "subtitle": "Share of papers published open access, grey 2014 to green 2024 (%); shaded: majority open access",
      "xAxis": ["2014", "2024"],
      "xAxisTitle": "Share open access (%)",
      "connectByColor": "#009E73",
      "connectByWidth": 3,
      "dataPointSizeScaleFactor": 0.7,
      "setMinX": 0,
      "setMaxX": 70,
      "showLegend": False,
      "smpLabelInterval": 1,
      "segregateSamplesBy": ["Domain"],
      "stripBackgroundColor": "rgba(255,255,255,0)",
      "stripTextAlign": "left",
      "stripBackgroundBorderColor": "rgba(255,255,255,0)",
      "layoutTopology": "4X1",
      "decorations": {
        "range": [
          {
            "value": 50,
            "value2": 70,
            "color": "rgba(0,158,115,0.10)",
            "tooltip": "Majority open access"
          }
        ],
        "text": [
          {
            "value": 38,
            "smpId": 4,
            "panel": 3,
            "label": "Over 50% open access ▶",
            "color": "#009E73",
            "labelScaleFontFactor": 0.8
          }
        ]
      },
      "citation": "Source: synthetic data for illustration"
    },
    width = 760,
    height = 760
  )

  # Display the chart in its own Web page
  show_in_browser(chart)
Run this notebook: Open in Binder 
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph

graph(
  CanvasXpress(
    render_to = "dumbbell16",
    data = {
      "y": {
        "vars": ["2014", "2024"],
        "smps": ["Immunology", "Neuroscience", "Pharmacology", "Biochemistry", "Agronomy", "Psychology", "Economics", "Chemistry", "Materials", "Physics", "Computer science", "Mathematics", "Nursing", "Medicine", "Dentistry"],
        "data": [
          [40, 38, 39, 39, 33, 43, 18, 26, 25, 19, 16, 16, 36, 35, 28],
          [46.8, 47.8, 47.2, 45.8, 42.6, 57.3, 30, 32.3, 30.6, 23.7, 21, 19.9, 47.5, 45.6, 38.8]
        ]
      },
      "x": {
        "Change": ["5 to 10 points", "5 to 10 points", "5 to 10 points", "5 to 10 points", "5 to 10 points", "More than 10 points", "More than 10 points", "5 to 10 points", "5 to 10 points", "5 points or less", "5 points or less", "5 points or less", "More than 10 points", "More than 10 points", "More than 10 points"],
        "Domain": ["1. Life sciences", "1. Life sciences", "1. Life sciences", "1. Life sciences", "1. Life sciences", "2. Social sciences", "2. Social sciences", "3. Physical sciences", "3. Physical sciences", "3. Physical sciences", "3. Physical sciences", "3. Physical sciences", "4. Health", "4. Health", "4. Health"]
      }
    },
    config = {
      "graphType": "Dumbbell",
      "dumbbellType": "arrow",
      "dumbbellArrowDirection": "order",
      "theme": "classic",
      "colorScheme": "User",
      "colors": ["#6b6b6b", "#009E73"],
      "title": "Open-access share of papers by field",
      "subtitle": "Share of papers published open access, grey 2014 to green 2024 (%); shaded: majority open access",
      "xAxis": ["2014", "2024"],
      "xAxisTitle": "Share open access (%)",
      "connectByColor": "#009E73",
      "connectByWidth": 3,
      "dataPointSizeScaleFactor": 0.7,
      "setMinX": 0,
      "setMaxX": 70,
      "showLegend": False,
      "smpLabelInterval": 1,
      "segregateSamplesBy": ["Domain"],
      "stripBackgroundColor": "rgba(255,255,255,0)",
      "stripTextAlign": "left",
      "stripBackgroundBorderColor": "rgba(255,255,255,0)",
      "layoutTopology": "4X1",
      "decorations": {
        "range": [
          {
            "value": 50,
            "value2": 70,
            "color": "rgba(0,158,115,0.10)",
            "tooltip": "Majority open access"
          }
        ],
        "text": [
          {
            "value": 38,
            "smpId": 4,
            "panel": 3,
            "label": "Over 50% open access ▶",
            "color": "#009E73",
            "labelScaleFontFactor": 0.8
          }
        ]
      },
      "citation": "Source: synthetic data for illustration"
    },
    width = 760,
    height = 760
  )
)

using CanvasXpress

canvasxpress(Dict(
  "y" => Dict(
    "vars" => ["2014", "2024"],
    "smps" => ["Immunology", "Neuroscience", "Pharmacology", "Biochemistry", "Agronomy", "Psychology", "Economics", "Chemistry", "Materials", "Physics", "Computer science", "Mathematics", "Nursing", "Medicine", "Dentistry"],
    "data" => [
      [40, 38, 39, 39, 33, 43, 18, 26, 25, 19, 16, 16, 36, 35, 28],
      [46.8, 47.8, 47.2, 45.8, 42.6, 57.3, 30, 32.3, 30.6, 23.7, 21, 19.9, 47.5, 45.6, 38.8]
    ]
  ),
  "x" => Dict(
    "Change" => ["5 to 10 points", "5 to 10 points", "5 to 10 points", "5 to 10 points", "5 to 10 points", "More than 10 points", "More than 10 points", "5 to 10 points", "5 to 10 points", "5 points or less", "5 points or less", "5 points or less", "More than 10 points", "More than 10 points", "More than 10 points"],
    "Domain" => ["1. Life sciences", "1. Life sciences", "1. Life sciences", "1. Life sciences", "1. Life sciences", "2. Social sciences", "2. Social sciences", "3. Physical sciences", "3. Physical sciences", "3. Physical sciences", "3. Physical sciences", "3. Physical sciences", "4. Health", "4. Health", "4. Health"]
  )
);
  graphType = "Dumbbell",
  dumbbellType = "arrow",
  dumbbellArrowDirection = "order",
  theme = "classic",
  colorScheme = "User",
  colors = ["#6b6b6b", "#009E73"],
  title = "Open-access share of papers by field",
  subtitle = "Share of papers published open access, grey 2014 to green 2024 (%); shaded: majority open access",
  xAxis = ["2014", "2024"],
  xAxisTitle = "Share open access (%)",
  connectByColor = "#009E73",
  connectByWidth = 3,
  dataPointSizeScaleFactor = 0.7,
  setMinX = 0,
  setMaxX = 70,
  showLegend = false,
  smpLabelInterval = 1,
  segregateSamplesBy = ["Domain"],
  stripBackgroundColor = "rgba(255,255,255,0)",
  stripTextAlign = "left",
  stripBackgroundBorderColor = "rgba(255,255,255,0)",
  layoutTopology = "4X1",
  decorations = Dict(
    "range" => [
      Dict(
        "value" => 50,
        "value2" => 70,
        "color" => "rgba(0,158,115,0.10)",
        "tooltip" => "Majority open access"
      )
    ],
    "text" => [
      Dict(
        "value" => 38,
        "smpId" => 4,
        "panel" => 3,
        "label" => "Over 50% open access ▶",
        "color" => "#009E73",
        "labelScaleFontFactor" => 0.8
      )
    ]
  ),
  citation = "Source: synthetic data for illustration"
)
CanvasXpress Logo

CanvasXpress a stand-alone JavaScript Library for Data Analytics. Built for the purpose of reproducible research with a sophisticated and unobtrusive user interface. Full and effortless audit trail of data, configuration and all user interactions in every visualization.

©2025 All Rights Reserved. CanvasXpress®

Documentation
Examples Docs Learn Api Spec Quality Accessibility Updates Changelog
Company
Contact License Governance Support Regulated & GxP Admin
Information
Terms of Use Privacy policy References
⇧