Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chart Annotations #7258

Open
pavelgruba opened this issue Mar 13, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@pavelgruba
Copy link
Contributor

commented Mar 13, 2019

The Problem

In certain cases, visualized data needs to be annotated with an image or text block. The Chart already provides a similar functionality in the form of labels and tooltips, but they are anchored to series points.

The Proposed Solution

We plan to implement image and text annotations that you can anchor to any chart element or leave unattached.

Chart annotations will have the following API:

let chartOptions = {
  annotations: [{ 
    // text annotation 
    // particular combination of options depend on your UI design
  }, {
    // image annotation 
    // particular combination of options depend on your UI design
  }],
  annotationStyle: { 
    label: {
        // appearance settings that apply to all text annotations
    }, 
    image: {
        // appearance settings that apply to all image annotations
    } 
  } 
} 

This API gives us a capability to add more annotation types in the future.

Each annotation can have the following options. Which of the coordinate fields to use depends on the use-case.

{ 
  visible: true,
  x: 0, // pixel coordinate 
  y: 0, // pixel coordinate 
  value: 0, // value coordinate 
  argument: 0, // argument coordinate
  axis: "value_axis_name", // the value axis by which to track the value coordinate
                           // (for a chart with multiple value axes) 
  series: "series_name" // the series by which to track the argument coordinate
                        // (when multiple series points correspond to a single argument)
} 

Add an unanchored annotation

annotations: [{
  x: 100,
  y: 200
}]

Anchor an annotation to a chart coordinate

annotations: [{ 
  value: 15,  
  argument: new Date(2018, 1, 16),
  axis: "value_axis_2" // in a chart with multiple value axes
}]

Display an annotation on the axis

annotations: [{ 
  // this annotation will be shown on the value axis 
  value: 15,  
  axis: "value_axis_2" // in a chart with multiple value axes
}, { 
  // this annotation will be shown on the argument axis 
  argument: new Date(2018, 1, 16)
}]

Anchor an annotation to a series

annotations: [{ 
  value: 15, 
  argument: "Apple",
  axis: "value_axis_2", // in a chart with multiple value axes
  series: "series_name"
}]

Mixed anchoring

You can use pixel and chart coordinates simultaneously:

annotations: [{ 
  y: 150,  
  argument: new Date(2018, 1, 16)
}]

We Need Your Feedback

Take a Quick Poll

What other annotation types would be useful for your chart?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

@GlenHerman

This comment has been minimized.

Copy link

commented May 16, 2019

Ability for the user to right mouse click, add annotation, change text and anchor with drag to any location on the chart

@pavelgruba

This comment has been minimized.

Copy link
Contributor Author

commented May 17, 2019

We will consider implementing such a functionality in future releases.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.