uber/react-vis

RadarChart - add straight "spider" lines (similar to CircularGridLines)

Open

#1009 opened on Oct 15, 2018

View on GitHub
 (4 comments) (0 reactions) (0 assignees)JavaScript (8,615 stars) (868 forks)batch import
enhancementhelp wanted

Description

Right now, it's possible to create a "spider" chart by using RadarChart and adding invalid data. See the "Radar Chart with Tooltips" showcase for an example:

In this example, the chart uses 6 dummy data entries to draw the 6 polygons before adding the real polygon. This is a little clunky.

It would be nice to have something like CircularGridLines (maybe StraightCircularGridLines?) to optionally add to the RadarChart. Consider the following example: a radar chart has 5 domains, each have a range of 0-5. The data you want to represent has a perfect 5 in all 5 domains. The CircularGridLines would make it look like the data is lacking - not a perfect 5/5/5 - due to the space between the polygon's straight lines and the rounded grid lines. Straight lines would more accurately depict the data.

Contributor guide

Tech stack
javascriptreact
Domain
frontenddata
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
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.
mostly clear
Prerequisites
Reactreact vis componentsdata visualization
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue requests a new component similar to CircularGridLines but with straight lines for RadarChart. Start by examining the existing CircularGridLines component's implementation and API in the react vis source code (likely in src/plot/gridlines/). Understand how RadarChart renders its axes and how the polygon lines are drawn. The goal is to create a StraightGridLines component that can be optionally added to RadarChart. Consider whether to reuse or extend CircularGridLines or create a separate component. The issue mentions that currently users add dummy data to achieve straight lines; the new component should eliminate that workaround. Review any comments on the issue for additional context or design suggestions.