Images in JavaScript

How to add images to charts as background images or logos.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

var data = [
  {
    x: ["-35.3", "-15.9", "-15.8", "-15.6", "-11.1", "-9.6", "-9.2", "-3.5", "-1.9", "-0.9", "1.0", "1.4", "1.7", "2.0", "2.8", "6.2", "8.1", "8.5", "8.5", "8.6", "11.4", "12.5", "13.3", "13.7", "14.4", "17.5", "17.7", "18.9", "25.1", "28.9", "41.4"],
    y: ["Designers, musicians, artists, etc.", "Secretaries and administrative assistants", "Waiters and servers", "Archivists, curators, and librarians", "Sales and related", "Childcare workers, home car workers, etc.", "Food preparation occupations", "Janitors, maids, etc.", "Healthcare technicians, assistants. and aides", "Counselors, social and religious workers", "Physical, life and social scientists", "Construction", "Factory assembly workers", "Machinists, repairmen, etc.", "Media and communications workers", "Teachers", "Mechanics, repairmen, etc.", "Financial analysts and advisers", "Farming, fishing and forestry workers", "Truck drivers, heavy equipment operator, etc.", "Accountants and auditors", "Human resources, management analysts, etc.", "Managers", "Lawyers and judges", "Engineers, architects and surveyors", "Nurses", "Legal support workers", "Computer programmers and system admin.", "Police officers and firefighters", "Chief executives", "Doctors, dentists and surgeons"],
    marker: {
      color: "rgb(253, 240, 54)",
      line: {
        color: "rgb(0, 0, 0)",
        width: 2
      }
    },
    name: "y",
    orientation: "h",
    type: "bar",
  }
];
var layout = {
  autosize: false,
  bargap: 0.15,
  bargroupgap: 0.1,
  barmode: "stack",
  height: 800,
  hovermode: "x",
  images: [
    {
      x: 1,
      y: 1.05,
      sizex: 0.2,
      sizey: 0.2,
      source: "https://raw.githubusercontent.com/cldougl/plot_images/add_r_img/vox.png",
      xanchor: "right",
      xref: "paper",
      yanchor: "bottom",
      yref: "paper"
    }
  ],
  margin: {
    r: 20,
    t: 125,
    b: 75,
    l: 300
  },
  title: {
    text: "Moving Up, Moving Down<br><i>Percentile change in income between childhood and adulthood</i>"
  },
  width: 700,
  xaxis: {
    tickmode: "linear",
    dtick: 10,
    gridcolor: "rgba(102, 102, 102, 0.4)",
    linecolor: "#000",
    linewidth: 1,
    mirror: true,
    nticks: 0,
    showticklabels: true,
    tick0: 0,
    tickwidth: 1,
    title: {
      text: "<i>Change in percentile</i>"
    },
  },
  yaxis: {
    anchor: "x",
    tickmode: "linear",
    gridcolor: "rgba(102, 102, 102, 0.4)",
    gridwidth: 1,
    linecolor: "#000",
    linewidth: 1,
    mirror: true,
    showgrid: false,
    showline: true,
    showticklabels: true,
    tick0: 0,
    type: "category",
    zeroline: false
  }
};

Plotly.newPlot('myDiv', data, layout);
Click to copy
−30−20−10010203040Designers, musicians, artists, etc.Secretaries and administrative assistantsWaiters and serversArchivists, curators, and librariansSales and relatedChildcare workers, home car workers, etc.Food preparation occupationsJanitors, maids, etc.Healthcare technicians, assistants. and aidesCounselors, social and religious workersPhysical, life and social scientistsConstructionFactory assembly workersMachinists, repairmen, etc.Media and communications workersTeachersMechanics, repairmen, etc.Financial analysts and advisersFarming, fishing and forestry workersTruck drivers, heavy equipment operator, etc.Accountants and auditorsHuman resources, management analysts, etc.ManagersLawyers and judgesEngineers, architects and surveyorsNursesLegal support workersComputer programmers and system admin.Police officers and firefightersChief executivesDoctors, dentists and surgeons
Moving Up, Moving DownPercentile change in income between childhood and adulthoodChange in percentile
Plotly.newPlot('myDiv', [{
  x: [1, 2, 3],
  y: [1, 2, 3]
}], {
  images: [
      {
        "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
        "xref": "paper",
        "yref": "paper",
        "x": 0,
        "y": 1,
        "sizex": 0.2,
        "sizey": 0.2,
        "xanchor": "right",
        "yanchor": "bottom"
      },
      {
        "source": "https://images.plot.ly/language-icons/api-home/js-logo.png",
        "xref": "x",
        "yref": "y",
        "x": 1.5,
        "y": 2,
        "sizex": 1,
        "sizey": 1,
        "xanchor": "right",
        "yanchor": "bottom"
      },
      {
        "source": "https://images.plot.ly/language-icons/api-home/r-logo.png",
        "xref": "x",
        "yref": "y",
        "x": 1,
        "y": 3,
        "sizex": 2,
        "sizey": 2,
        "sizing": "stretch",
        "opacity": 0.4,
        "layer": "below"
      },
      {
        "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
        "xref": "x",
        "yref": "paper",
        "x": 3,
        "y": 0,
        "sizex": 0.5,
        "sizey": 1,
        "opacity": 1,
        "xanchor": "right",
        "yanchor": "middle"
      },
    ]
})
Click to copy
11.522.5311.522.53