This example shows some random numbers plotted with a thinking face emoji (image). The image should probably be a square, with each side's length being a power of 2. Regardless of where any transparency is in the image, for mouseover or click/tap detection (not shown on this page), the code will assume a circular shape (this also applies to using the "square" option).

Mouse controls: Left-click and drag to rotate; alt (Mac)- or ctrl (Windows)-click-drag or middle-click-drag to pan; scroll or shift-click-drag to zoom. Touch screen controls: one finger to rotate; two-finger scroll to pan; pinch to zoom.

You can see how the plot is constructed in the HTML source.

• The first required parameter is that point_type should be set to "custom".
• The second required parameter is the string custom_point, which is either a path to the image or a base-64 encoded image like "data:image/png;base64, iVBORw0KGgoAA...".
• If you use a path to an image, then you will not be able to test it locally in Chrome from a file:// address, as it will generate a cross-origin error – you'll either have to base64-encode it or run a localhost.

Posted 2016-10-02.