Skip to main content

Raster and Vector images

A quick guide for using images in Apache ECharts shows each type's prefixes.

Apache ECharts supports base64 PNG and SVG (vector) images.

As Daria mentioned in the video, most cases where you might need to use images include:

  • Data points,
  • Simple labels,
  • Loaded labels,
  • Tooltips,
  • Axis labels,
  • Axis data labels,
  • Legend,
  • Background.

You can enhance all of the above visual components with your images. There are multiple ways to reference images in the Apache ECharts configuration.

Reference images​

  • URL using image:// prefix.
  • Path using path:// prefix.
  • XML file using image://data:image/svg+xml;utf8 prefix.
  • PNG(raster) image using image://data:image;base64 prefix.

You can copy the below code and run it in the Apache ECharts visualization panel on your Grafana dashboard.

docs/volkovlabs-echarts-panel/tutorials/images.js
loading...

You should see the following visualization.

Display images using URL, Path, XML SVG and Base64 PNG.
Display images using URL, Path, XML SVG and Base64 PNG.