[Feature] Hyperlink/anchor support for pie charts

[arty-name]

What problem does this feature solve?

Clicking a pie chart section or a legend entry should be able to take the user to a specified URL. I render my SVGs on the server, and browser Javascript is not strictly necessary for this feature, I currently achieve it by wrapping the sections and labels in <a xlink:href="${link}">…</a>.

This potentially could be extended to some other chart types.

What does the proposed API look like?

Not having much eCharts experience, I can only propose a suboptimal API. In my case it looks like this:

{
  "dataset": { "source": [["Company 1", 60, "/companies/1"], ["Company 2", 40, "/companies/2"]] }
}

Of course a different configuration option could be used to specify the mapping of labels to URLs in a more generic way, reusable by other types of charts.

[MatthiasMert]

Depending on which features of the pie chart you are using you could use a sunburst with nodeClick: 'link' instead.

Example

[arty-name]

Thank you for the quick response @MatthiasMert!

When I visit the example and switch the renderer to SVG I do not see any effect of this option: neither clicking the section takes me to the URL, nor is a xlink:href present in the generated SVG.

I do not expect that the design requirements on our side will accept the sunburst type of the chart…

In any case I am happy to see the support for a similar feature already present, this means the chances of my request are higher than I expected!

[MatthiasMert]

Seems like echarts sandbox is preventing the redirect in the example link. If you substitue the series in this offical example by

{
      name: 'Access From',
      type: 'sunburst',
      radius: '50%',
      nodeClick: 'link',
      data: [
        { value: 1048, name: 'Search Engine', link: 'https://echarts.apache.org/examples/en/editor.html?c=pie-simple' },
        { value: 735, name: 'Direct', link: 'https://echarts.apache.org/examples/en/editor.html?c=pie-borderRadius' },
        { value: 580, name: 'Email', link: 'https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut' },
        { value: 484, name: 'Union Ads', link: 'https://echarts.apache.org/examples/en/editor.html?c=pie-half-donut' },
        { value: 300, name: 'Video Ads', link: 'https://echarts.apache.org/examples/en/editor.html?c=pie-padAngle' }
      ],
    }

the links will work. I dont know how they are realized tho.

[arty-name]

This way clicking the link works - thanks to in-browser JavaScript though. I do not see a xlink:href present in the SVG.

[adminy]

@MatthiasMert

I wasn't sure how to get links in grafana graphs, now this example has helped me do that, thank you.