uber/react-vis

Allow Labels to be on the 'outside' of the chart, allow subLabels to be styled

Open

#887 opened on Jul 23, 2018

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (8,615 stars) (868 forks)batch import
extended serieshelp wanted

Description

I have been having a problem rendering labels for my RadialChart and have broken it down to 2 root causes, both of which I'm happy to submit a PR for if they make sense, or to split into separate issues for discussion.

Context: I'm attempting to position labels cleanly outside the rendered chart entirely.

From testing around with the generated chart, the way to best position labels is to invert the checks for the textAnchor and alignmentBaseline values in LabelSeries so that the labels are positioned outside the chart completely, but consistently spaced.

The second issue I'm having is that we want to be able to style the sub label (specifically, significantly increase the font size) and to do that right now, I'm resorting to external css and a translate css transform.

It seems like the first problem could be solved with a new boolean prop for label series, also exposed in RadialChart as labelsOutside (not sure of a good prop name in the label series). The second would be to allow subLabelsStyle to be a prop similar to labelsStyle.

Contributor guide

Tech stack
javascriptreactcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Look at the LabelSeries component in the react vis source code to understand how textAnchor and alignmentBaseline are currently set. Also examine RadialChart to see how labels and subLabels are rendered. Consider implementing a new boolean prop 'labelsOutside' for LabelSeries to invert the positioning logic, and a 'subLabelsStyle' prop to allow custom styling of subLabels. Check existing tests and documentation for similar props to ensure consistency.