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
0
votes
1 answer

React Vis Horizontal Crosshair

Is there a way to display the crosshair so that it is horizontal instead of vertical? By default, given a list of points it will snap a vertical crosshair to the x values of the nearest point.
user14994547
0
votes
1 answer

React-vis y axis scale

I have a bar chart in a react-vis component. I allow react-vis to calculate the y axis but it never seems to go to the end of the full range of y values. For example... This is what I get by default.., What I want to achieve is something like…
user1654348
  • 283
  • 4
  • 12
0
votes
1 answer

rtl text shown out of order

I have a perisan text that is coming from the server. Under normal circumstances it would be shown like this: ساعت12 and when i test it in different parts of my code it shows up fine. but when i use it in my charts the characters are shown out of…
Parsa Nasirimehr
  • 362
  • 2
  • 6
0
votes
0 answers

Get x and y value when hovering on LinSeries React Vis

Trying to get the x and y values at mouse over position. d[0] } getY={ d => d[1] } width={300} height={300}>
paul blackmore
  • 191
  • 2
  • 13
0
votes
2 answers

react-vis - align x-axis ticks with start and end of bars

I am trying to shift the x-axis ticks so that they are aligned with each bar rect. The idea is that the bars correspond to an event between the hours of x - y and the ticks are a little mis-leading. I've tried to use tickFormat() but that seems to…
Justin
  • 683
  • 8
  • 24
0
votes
1 answer

react-vis make y-axis to sort in ascending order

good day. my data looks like this 0: {x: "06/22/21 01:31:00", y: "11.091"} 1: {x: "06/22/21 01:34:00", y: "10.863"} 2: {x: "06/22/21 01:36:00", y: "11.085"} 3: {x: "06/22/21 01:37:00", y: "11.216"} 4: {x: "06/22/21 01:39:00", y: "11.138"} 5: {x:…
deathfry
  • 626
  • 1
  • 7
  • 28
0
votes
1 answer

react-vis doesn't draw second time ( react-vis draws only once or react-vis draws only for the first time )

I have a component with react-vis in it. This component is in react-tabs, on the chart tab. When I access that tab for the first time it is drawn ok. Every time after that it is not drawn at all. What is the issue? return (
deathfry
  • 626
  • 1
  • 7
  • 28
0
votes
0 answers

How to assign dynamic values within codes in react

I am using react-vis-network to create graphs. below is the syntax to use react-vis-network. const MyNetwork = () => (
techexplorer
  • 79
  • 2
  • 2
  • 8
0
votes
1 answer

How do I get react-vis's Crosshair to show only data of the series closest to the mouse cursor?

I am making a simple data visualizer using react-vis, but I can't figure out how to make the crosshair show only the y-value of the most recently mouseover'd Series. Also, I can not seem to find any documentation on the event object specified in…
futebutesiku
  • 1
  • 2
0
votes
1 answer

How can I select VerticalBarSeries from a ReactVis series plot?

ReactVis API here outlines what is available which might be helpful. I have successfully added a "drag to select" function to my custom code. In the picture, we would be selecting 13 to 17 and turn the fill value to red for example. More pseudo code…
Layik
  • 43
  • 6
0
votes
2 answers

How to update state of 2D array with N objects inside in React?

Before I jump on subject, I want to mention that I've already referred to questions like these, but could not figure the solution on my own. Updating React state as a 2d array? Let's assume this is my state object state = { graphData: [ …
Seinfeld
  • 433
  • 7
  • 24
0
votes
1 answer

react-vis: How to format ISO dates

I have a live time-series data connected to a front-end react-vis XY plot. The data is fed as a JSON by a python Flask Server. The JSON contains date in iso format; Something like 2019-11-21T00:00:00.000Z. I am able to display the time-series data…
transporter76
  • 3
  • 1
0
votes
1 answer

how to stop zoom in and zoom out in react?

I am using the below package https://www.npmjs.com/package/react-graph-vis could you please tell me how to stop zoom in and zoom out of all nodes https://stackblitz.com/edit/react-c9tnhw?file=index.js here is my…
user944513
  • 12,247
  • 49
  • 168
  • 318
0
votes
0 answers

installing npm package from github fork leads to missing files

while I can run yarn add react-vis just fine, when I run yarn add richardlewisjones/react-vis, I get these errors: error: (client) ./node_modules/react-vis/es/index.js error: (client) ./node_modules/react-vis/dist/style.css and was wondering how I…
reactor
  • 1,722
  • 1
  • 14
  • 34
0
votes
1 answer

Update chart on dropdown list change - pass props to children

I'm using react-vis to make a line chart. I have a parent component called RoomUtilisation and children called ChartGridLine. The parent fetch data (currently using mock data), then pass it into children via props. However, somehow the chart only…
Ron
  • 1
  • 1
1 2 3 4
5
6