Skip to content Skip to sidebar Skip to footer
Home / Image / Javascript / Markers / Plotly

Plotly Js Image Markers On Specific Dates

Post a Comment
I'm using this example: https://plot.ly/javascript/images/#add-multiple-images and trying to show image markers on specific dates. With xref set to 'x', the images are not showing

Solution 1:

Apparently the "sizex" parameter takes values in milliseconds when the xaxis is time based. So a value of 0.5 for sizex in my code snippet rendered a very tiny image.

Changed the sizex parameter to two days (i.e 2*24*60*60*1000 milliseconds) and now the image is visible.

Plotly.plot('graph', [{
  x: ['1991-01-01', '1991-02-01', '1991-03-01'],
  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": '1991-01-01',
    "y": 2,
    "sizex": 2*24*60*60*1000,
    "sizey": 1,
    "xanchor": "center",
    "yanchor": "middle"
  },
]
})
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>

Post a Comment for "Plotly Js Image Markers On Specific Dates"