| CARVIEW |
Select Language
HTTP/2 200
server: GitHub.com
content-type: text/html; charset=utf-8
last-modified: Thu, 23 Nov 2017 06:58:47 GMT
access-control-allow-origin: *
strict-transport-security: max-age=31557600
etag: W/"5a1671a7-3ecc"
expires: Mon, 29 Dec 2025 16:10:59 GMT
cache-control: max-age=600
content-encoding: gzip
x-proxy-cache: MISS
x-github-request-id: 59B7:15317B:90E175:A2828F:6952A5BA
accept-ranges: bytes
age: 0
date: Mon, 29 Dec 2025 16:00:59 GMT
via: 1.1 varnish
x-served-by: cache-bom-vanm7210082-BOM
x-cache: MISS
x-cache-hits: 0
x-timer: S1767024060.588555,VS0,VE217
vary: Accept-Encoding
x-fastly-request-id: e3559dd86fdc8b2306d89e06ab76f8973665e7d2
content-length: 3968
ChartAccent
ChartAccent
Works best with the Google Chrome browser
If you are a PowerBI user, get the ChartAccent custom visuals here: Bar Chart, Line Chart
Examples
Created and annotated with ChartAccent












Annotating with ChartAccent
Create and modify an annotation in just three steps
(1) Select an annotation target
- Direct selection: Hover to highlight an annotation target. Click to select and annotate a target; mouse drag, lasso, or click while holding CTRL or SHIFT keys selects multiple targets.
- Indirect selection: Click on a legend item to annotate a series of items that share the same categorical attribute value.
- Direct range selection: Select a point or a region between two points along an axis, and these range selections trigger a default shape annotation.
- Range editing: Adjust the position or range using ChartAccent's range target editor, which allows you to compose basic formulas that can reference the attributes of the dataset. The editor features auto-complete support and includes a set of basic statistical functions including minimum, maximum, mean, and median.
- Indirect range selection: Upon selection of a range target annotation, you can select data items above or below the range. This selection is tightly coupled with the original range target; if the range annotation is adjusted, ChartAccent automatically updates any associated selections of data items above or below the range.
(2) Add additional annotation forms
- Default annotation forms: When you select an annotation target, ChartAccent applies the default annotation form depending on the target. The default annotation for a data item is a black stroke border and a text annotation indicating the item's value, which appears adjacent to the item. Single attribute range targets trigger line or rectangle annotations in response to a click or drag along an axis, respectively.
- Other annotation forms: You can also add text, image, and shape annotations to chart elements; these shape annotations include lines, arrows, ellipses, and rectangles.
(3) Modify the visual properties of the annotation
- Control panel: Use ChartAccent's control panel for modifying the visual properties of annotation. Annotations for sets and series of data items share the same visual properties, so each item in a set or series does not need to be modified individually. Annotation properties include font properties such as type, size, and color, the visibility of a dropline connecting an annotation to its target, as well as stroke and fill properties.
Survey
A corpus of 106 annotated charts from six news graphics desks, labeled with the dimensions of our design space.
Publication
ChartAccent: Annotation for Data-Driven Storytelling
Donghao Ren, Matthew Brehmer, Bongshin Lee, Tobias Höllerer, and Eun Kyoung Choe
(Accepted) Proceedings of IEEE Pacific Visualization (PacificVis 2017), 2017