We released a new version of the Apache ECharts Panel 4.3.0/4.3.1 for Grafana. This feature release
- Added Alert State and Annotations.
Added `getDataSourceSrv` parameter to retrieve the entry point to data sources.- Updated USA and World GeoJSON.
- Updated to the latest Grafana 9.4.7 toolkit and Apache ECharts 5.4.2.
During the Grafana teams review the getDataSourceSrv
parameter was removed due to security reasons in v4.3.1.
The plugin was updated in Grafana Catalog on April 24, 2023.
100k downloads
The Apache ECharts panel was downloaded more than 100,000 times. Apache ECharts is not plug-an-play and has a learning curve. Our YouTube tutorials and documentation help to experience unbeatable customization capabilities.

Alert State and Annotations
We added support for Annotations in Apache ECharts using mark lines. Data for mark lines should be retrieved from the data
as explained in the documentation.
const annotations = [];
data.annotations.map((a) => {
a.source.forEach((source) =>
annotations.push({
xAxis: source.time,
label: source.text,
lineStyle: {
color: source.color,
width: 2,
},
})
);
});
/**
* Data Sources
*/
const series = data.series.map((s) => {
const sData =
s.fields.find((f) => f.type === "number").values.buffer ||
s.fields.find((f) => f.type === "number").values;
const sTime =
s.fields.find((f) => f.type === "time").values.buffer ||
s.fields.find((f) => f.type === "time").values;
return {
name: s.refId,
type: "line",
showSymbol: false,
areaStyle: {
opacity: 0.1,
},
lineStyle: {
width: 1,
},
data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),
markLine: {
data: annotations,
label: {
show: false,
},
symbol: ["none", "none"],
},
};
});

Entry point to data sources
During the Grafana teams review this functionality was removed due to security reasons in v4.3.1.
We are experimenting with a safe approach in the Data Manipulation plugin and will look into implementing it for the Apache ECharts.
Apache ECharts panel allows retrieving the entry point to data sources. With the data source instance, you can execute any methods provided by the data source.
async () => {
const targets = data.request?.targets;
if (targets.length && targets[0].datasource) {
const datasource = await getDataSourceSrv().get(targets[0].datasource);
notifySuccess(["PostgreSQL Version", await datasource.getVersion()]);
}
};
GeoJSON updates
GeoJSON files for USA and World were synchronized to the native maps found in Grafana GeoMap. Now you can easily switch to Apache ECharts from GeoMap to show visual maps as we did for the Website Analytics blog.

Panel Variables
We continue to experiment with adding DOM elements directly to the Apache ECharts container to add interactivity. This time we added a select list to choose an option to update Apache ECharts or directly interact with the data source using an entry point.

loading...
Getting Started
Apache ECharts visualization panel can be installed from the Grafana Catalog or utilizing the Grafana command line tool.
For the latter, use the following command.
grafana-cli plugins install volkovlabs-echarts-panel
YouTube Tutorial
The Apache ECharts plugin is a visualization panel for Grafana that allows you to incorporate the popular Apache ECharts library into your Grafana dashboard.
Apache ECharts is one of the three plugins that make Grafana complete. Dynamic Text, Data Manipulation and Apache ECharts are all you need to create functional real-world web applications.
Release Notes
Breaking changes in 4.3.1
- Due to security reasons getDataSourceSrv parameter was removed (#156)
Features / Enhancements
- Update to Grafana 9.4.7 (#146)
- Add getDataSourceSrv parameter to retrieve the entry point to data sources (#146)
- Update to Apache ECharts 5.4.2 (#147)
- Update USA and World GeoJSON used in GeoMap (#154)
- Add Alert State and Annotations (#155)
Apache ECharts 5.4.2
- [Feature][bar] Support borderRadius for polar bar and its background. #17995 (Ovilia)
- [Feature][i18n] Add Turkish(tr_TR) translation. #18012 (partitect)
- [Feature][i18n] Add Vietnamese(vi_VN) translation. #18279 (nghiepdev)
- [Fix][bar] Polar bar animation should start from r0 rather than 0. #17997 (Ovilia)
- [Fix][marker] Fix abnormal range of markArea in bar series. #18229 (Ovilia)
- [Fix][line] Fix labels don't show in line series when ssr is enabled. #18032 (plainheart)
- [Fix][svg] Fix defined CSS doesn't work due to unexpected encoding for style tag. #982 (plainheart)
- [Fix][sunburst] Fix labels might upside down in radial layout. #18240 (susiwen8)
- [Fix][dataset] Fix chart can't render when using object array and object item contains a property named length. #18276 (susiwen8)
- [Fix][tooltip] Fix tooltip still disappears after leaving the tooltip even if alwaysShowContent was enabled. #18221 (jianghaoran116)
- [Fix][text] Charsets like Cyrillic should break word the same as Latin. #973 (Ovilia)
- [Fix][type] Add missing treePathInfo property into sunburst formatter callback and add missing data option into SunburstSeriesOption. #18310 (plainheart)
- [Fix][type] Add missing callback function type for the symbol option of tree series. #18070 (ChepteaCatalin)
Feedback
We love to hear from you. There are various ways to get in touch with us.
- Ask a question, request a new feature, and file a bug with GitHub issues.
- Subscribe to our YouTube Channel and add a comment.
- Sponsor our open-source plugins for Grafana with GitHub Sponsor.
- Star the repository to show your support.