echarts icon indicating copy to clipboard operation
echarts copied to clipboard

Annotation editing support in toolbox

Open jeznag opened this issue 5 years ago • 12 comments

What problem does this feature solve?

Currently there is no easy way for a user to add annotations to a chart. The data can be initialised with labelled points but for my use case, I need my data analysts to be able to highlight a chart area and directly add annotations in a similar way to http://demo.blacklabel.pl/ (see the buttons in the top right: text, rectangle)

What does the proposed API look like?

  1. The toolbox would be able to be initialised with addAnnotations: true - this would add buttons in the top right corner similar to http://demo.blacklabel.pl/

  2. When annotations are added, an event would be triggered with a payload like this:

{
   annotationAdded: { annotationType: 'rectangle', annotationText: 'blah', annotationXMin: 123, annotationXMax: 150, annotationYMin: 100, annotationYMax: 200 },
   allAnnotations: [{ annotationType: 'rectangle', annotationText: 'blah', annotationXMin: 123, annotationXMax: 150, annotationYMin: 100, annotationYMax: 200 }]
}

jeznag avatar Feb 28 '19 23:02 jeznag

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵

echarts-bot[bot] avatar Feb 28 '19 23:02 echarts-bot[bot]

Yes. We are considering enhance labeling feature with annotation. There shall be much work to do, and it is scheduled in ECharts v5, which we haven't begin with yet.

Ovilia avatar Mar 01 '19 03:03 Ovilia

Looking forward to this feature !

hushaoqing avatar Aug 12 '19 11:08 hushaoqing

Hi Ovilia,

Do you have an update on when this will be available? Also in general, when is 5.0.0 to be released

tangstadk avatar Jul 01 '20 10:07 tangstadk

@Ovilia Looking forward for annotations feature which will allow users to annotate a chart freely with labels and shapes.

msbasanth avatar Sep 18 '20 06:09 msbasanth

is this feature still in pipeline?

nouman0320 avatar Aug 06 '21 13:08 nouman0320

still waiting for this feature in 2021....

yutingli119 avatar Nov 04 '21 19:11 yutingli119

https://echarts.apache.org/examples/zh/editor.html?c=scatter-label-align-top Is this what you want? @msbasanth @nouman0320 @yutingli119

Ovilia avatar Nov 08 '21 04:11 Ovilia

@Ovilia The static annotations are good.

Whether chart user can add annotations dynamically for marking/highlighting directly in the chart using tools provided with which we can add annotations. This will be a really good to have feature.

msbasanth avatar Nov 08 '21 04:11 msbasanth

@Ovilia The static annotations are good.

Whether chart user can add annotations dynamically for marking/highlighting directly in the chart using tools provided with which we can add annotations. This will be a really good to have feature.

Agreed. That's what I was looking forward to have...

yutingli119 avatar Nov 08 '21 21:11 yutingli119

Currently we don't provide such a toolbox. But it's not so complex to combine the echarts event, setOption update and labelLine features to get something similar.

Here is a example about using these features to interactive with the chart programmatically https://echarts.apache.org/examples/zh/editor.html?c=line-draggable

pissang avatar Nov 09 '21 02:11 pissang

It's the only missing feature that makes our team hesitant about adopting echarts for our product. It's already a majority of our customers that made it clear that it's a mandatory to have it.

tomasz-zablocki-ziegert avatar Aug 02 '22 12:08 tomasz-zablocki-ziegert

Is there any 3rd extension to support such interactive behavior, i.e. user add annotation and add line. If no, I assume in the future, echarts framework level should make some interactive foundation, so that the 3rd developer can do their own various line based on such foundation/api, just like like highstocks, toolbox can support shape, Fibonacci line, Pitchfork line, Parallel channel line and so on.

kchjxxgh avatar Jan 12 '23 11:01 kchjxxgh

Any news about this feature? Maybe echarts could integrate fabric.js to do this

MrSquaare avatar Feb 13 '23 16:02 MrSquaare

This feature would be awesome! 👀

andnig avatar Mar 24 '23 18:03 andnig

I find echarts a very nice plotting library. This feature to be a built-in feature will be a great boost in the application I manage

robertabenassi avatar May 25 '23 16:05 robertabenassi

https://echarts.apache.org/examples/zh/editor.html?c=scatter-label-align-top Is this what you want? @msbasanth @nouman0320 @yutingli119

https://codepen.io/VIKAS-KUMAR-the-vuer/pen/LYXWWXz?editors=0010

vikas-6 avatar Jun 28 '23 09:06 vikas-6

It would be much appreciated if echarts had annotations feature similar to this: https://www.highcharts.com/docs/advanced-chart-features/annotations-module

natasha-f avatar Oct 03 '23 22:10 natasha-f