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
2
votes
0 answers

React-vis: Is it possible to set a minimum height to verticalBarSeries bars?

I'm building a stacked vertical bar series chart with values that oscillate between 1 and 1.000.000, so the bars that show really low values can't be seen (the values in the top x-axis are divided by 1.000). Is it possible to set a minimum height…
diegoolavarriau
  • 71
  • 6
2
votes
0 answers

I'm trying to dynamically create react.vis LineSeries but the LineSeries is inserted after and are empty

I'm trying to change my charts so they iterate and load an arbitrary number of present series data into its chart in react-vis. I decided to use this.props.children, but the is inserted after the end of the svg, even though…
Maiakaat
  • 91
  • 8
2
votes
1 answer

'react-vis' how can i show crosshair on a specific point

I would like to be able (upon the chart load) show the 'crosshair' on a specific point on the chart. I have the crosshair at the moment displaying correctly crosshair with data from 9 y axis (x axis is time one). I have searched the documentation…
xyz83242
  • 629
  • 14
  • 27
2
votes
1 answer

show date in( MM-DD) format in x-axis using react-vis

I am trying to implement react-vis in my project. I need to show data based on date. I am using tickFormat for it but it is showing same date two times in x-axis.I am adding few lines of my code here.
LB93
  • 117
  • 1
  • 12
2
votes
2 answers

How do i specify the axis range in React-Vis

How do i specify the axis range in React-Vis For Ex: 0 to 100 for Y Axis and the data is as below data={[ {x: 1, y: 45}, {x: 2, y: 50}, {x: 3, y: 85} ]}/> The YAxis must range 0 to 100 even though the max Y value here is 85
Prashant Andani
  • 109
  • 3
  • 6
1
vote
0 answers

Position labels in radial charts - react-vis

I am struggling with positioning labels in radial charts using the react-vis library. Here is my code: const DonutChart = () => { const data = [{ angle: 4, label: "Yes" }, { angle: 4, label: "No" }, { angle: 4, label: "Dont know" }] return…
Capucine
  • 21
  • 3
1
vote
1 answer

How to make legend's line wider in a react-vis XYPlot

The DiscreteColorLegends of an XYPlot are a little narrow for me: Specially when I want to make them other than solid: I browsed the documentation, and even the source code; I think that the length is determined in line 59 of this file:…
Luis López
  • 159
  • 8
1
vote
1 answer

How can I induce rerendering of other components on an update to this mutable ref to Vis.js network? Is there a better package available?

I'm trying to work with Vis.js in React and have started with the pattern shared by James Tharpe: https://www.jamestharpe.com/react-visjs/. I'm also trying to include what I'm calling BoltOns which take the state of the network as a param, allowing…
lmonninger
  • 831
  • 3
  • 13
1
vote
1 answer

React Vis x can't be a string

I am using React Vis to create a simple Graph. This is my code: import React from 'react'; import '../../../node_modules/react-vis/dist/style.css'; import {XYPlot, VerticalBarSeries} from 'react-vis'; const myData = [ {x: 'A', y: 10}, {x: 'B',…
cachedcashew
  • 257
  • 2
  • 3
  • 9
1
vote
1 answer

React Dynamically render component within div based on div id

I am building a discrete bar graph component from scratch to display flights arrival/departure for every hour of the day. I need to basically match some of the data (flight and time) to a particular div and render it within the div. For example in…
Ap-Mich
  • 37
  • 9
1
vote
0 answers

Can't use Nivo tooltip or crosshair draggability on mobile

I'm trying to create a line chart that uses crosshairs and tooltip using Nivo. I was able to get everything working great on desktop, but on mobile, when I try to drag across the graph with my finger, nothing happens. The only time the crosshair and…
frankied003
  • 466
  • 6
  • 26
1
vote
1 answer

padAngle property of react-vis radial pie chart not working

My code What is being rendered What I was hoping for I've tried numerous values, and I haven't been able to change anything. Working from these docs: http://uber.github.io/react-vis/documentation/other-charts/radial-chart
Micah Wallingford
  • 11
  • 1
1
vote
1 answer

VisJS Network Graph not stabilizing and moving in circle

I am trying to create a network graph using visjs but the problem is it works for one set of nodes and edges but doesn't work for the other. The data (nodes and edges) can vary so is there a way I can provide a generic settings? As in the given…
newbie
  • 530
  • 1
  • 9
  • 36
1
vote
0 answers

Is there a way to handle a mouseover event on React-Vis Crosshair?

I tried applying a handler to the object directly, without effect: {console.log("hello world")}} /> Is this perhaps harder than I expected...?
Rollie
  • 4,391
  • 3
  • 33
  • 55
1
vote
0 answers

React-vis x- axis shows .5 numbers

I feel the answer is so obvious and simple but I can't find it. Im visualizing a lineSeries chart with react-vis. My x data is 1,2,3,4,5 and so on. Y are kilograms. But the x-axis rendert shows not only 1,2,3,4 ... but shows it 1.0, 2.0, 3.0 plus…
Ruben Bardok
  • 23
  • 3
1
2
3 4 5 6