Stack Overflow
Stack Overflow

Questions tagged [react-vis]

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, pie and donut charts, sunbursts, and tree maps.

Features

  • Simplicity. react-vis doesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
  • Flexibility. react-vis provides a set of basic building blocks for different charts. For instance, separate X and Y axis components. This provides a high level of control of chart layout for applications that need it.
  • Ease of use. The library provides a set of defaults which can be overdid by custom user's settings.
  • Integration with React. react-vis supports the React's life cycle and doesn't create unnecessary nodes.
  • Based on D3.js

Resources

83 questions
1
vote
1 answer

How do I get the event from onValueMouseOver in react-vis?

According to the react-vis doc, onValueMouseOver should return both the event and the datapoint. However, the event does not seem to be passed. Am I doing something wrong? const Charts = () => { const data = [ { x: 1, y: 1 }, { x: 2, y: 1…
AdyBaby
  • 59
  • 7
1
vote
1 answer

React Vis MarkSeries is throwing x function is not defined error

has anyone used react-vis? I'm trying to render the Marks over line series when the user hovers over the chart. The problem is it keeps on throwing an error x is not a function. Has anyone run into such kind of issue? the error comes when I…
Gardezi
  • 2,692
  • 2
  • 32
  • 62
1
vote
0 answers

React Vis - Is there a way to get the value of Y at the current mouse location?

Is there any way of showing what the current value of Y would be on an XYPlot? I was previously using crosshairs (which shows the Y values at a common X) but I realized what I really needed was just to be able to display whatever the Y would be at…
CustardBun
  • 3,457
  • 8
  • 39
  • 65
1
vote
1 answer

Treemap from from react-vis Not Displaying As Expected

I am trying to use renderMode: 'DOM', for mode: 'circlePack', which should display the following image, it only works when I have renderMode set to 'SVG': When I set renderMode to 'DOM', I get the following, onLeafClick, onLeafMouseOver and…
Thobs More
  • 63
  • 11
1
vote
1 answer

I want to pass set of data through puppeteer to render a react-vis component instead of passing data in html template?

I want to pass set of data through puppeteer to render a react-vis component instead of passing data in html template? i've attached two files one of them is puppeteer file and another one is HTML template file for react-vis? I'm new to Puppeteer…
Anurag Mathur
  • 215
  • 1
  • 3
  • 6
1
vote
2 answers

How to give value above each bar in bar chart of react-vis?

I want to display string or numeric value above each rect(bar) element in VerticalBarSeries of react-vis. And value should be just above the bar height. Also, How can I change bar height,width and margin of barSeries. I have used display: flex to…
Jagmohan Mandre
  • 81
  • 1
  • 4
1
vote
1 answer

Mouseover not getting triggered when two line mark series are overlapping in react-vis

In my application, I am using react-vis to display two line mark series. When the mouse hovers on the mark, a hint is shown. In certain cases, this mouse over is not getting triggered. I have given the code below. import React, { Component } from…
Subramony_Mahadevan
  • 11
  • 2
1
vote
0 answers

How to add labels to multiple vertical bar series?

Label series need x and y values to show labels. I am trying to add labels at plot that has multiple vertical bar series that has same xAxis values. The XYPlot shows labels at same vertical line if the x values are same. I used xOffset to show…
Tugrul Emre Atalay
  • 918
  • 1
  • 9
  • 28
1
vote
2 answers

How to push json data into XY array for React-vis?

Looking to start some graphing in react-vis and am wondering what's the best approach for pushing data from a json to state so I can access the state data from graphing. Below is my test json: [ { "day": "1", "flights":"58", …
LoF10
  • 1,907
  • 1
  • 23
  • 64
1
vote
1 answer

React Vis : Legend style and position

The below code gives me a picture, but the legend is a bit naff. SO won't let me upload a picture right now, but the legend is stuck in the bottom left corner... and it's tiny. Is there a way to take control of the legend position and / or boost…
Simon
  • 323
  • 2
  • 15
1
vote
1 answer

Is there an function in react-vis to scale each line series into it's % range having the domain min set to 0 and max to 100

I am having 9 different line series being drawn on the react-vis graph. Values of those line series vary. The smallest range is between 0-4, the largest one is between 0 - 12000 (image 1). When I draw all those line series most of them sit down at…
xyz83242
  • 629
  • 14
  • 27
1
vote
1 answer

cannot remove gap between bars from React vis graph

I have the following: …
Aessandro
  • 5,517
  • 21
  • 66
  • 139
1
vote
1 answer

Horizontal legend React-vis

I have a problem with horizontal legend in React-vis. I used this props orientation="horizontal", but nothing... item.name)} colors={json.items.map((item) =>…
Nikita Aplin
  • 367
  • 2
  • 10
1
vote
1 answer

React-Vis Legend toggle filter for line chart

I am using react-vis and trying to implement a line chart with legends that can filter as shown on the first plot on top of this website: https://uber.github.io/react-vis/examples/showcases/plots Basically when the legend item is clicked the whole…
kinkeal
  • 13
  • 1
  • 4
1
vote
3 answers

React Could not find a declaration file for module 'react-vis'

I installed react-vis library for my react code. I used this command, like in the tutorial: npm install react-vis --save But when I include the library with this code: import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';…
user10249086
1 2
3
4 5 6