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

Customize storm-react-diagrams with react-vis

I have a customized storm-react-diagram Node: this.engine.registerNodeFactory(new ExampleNodeFactory()); const node2 = new ExampleNodeModel(); const port2 = node2.addPort( new ExamplePortModel("left") ); My render method within the Widget looks…
Helmut Steiner
  • 11
  • 3
1
vote
0 answers

How to set gradient to background of react-vis xyplot?

Trying to style the background of the XYPlot and the left axes above 0 to have red and green zones. I'm getting close for the left axes section, it currently goes below the axes. I am still not sure what portion to adjust for the actual body of the…
Brad P
  • 106
  • 5
1
vote
1 answer

Visualizing ImmutableJS data from Redux store in a graph

I am working on a React and Redux application that uses ImmutableJS to store all of it's state. The app receives data from a sensor at about 100 Hz. I need to draw a graph that updates in real time and displays this data. I have been using React-Vis…
Magnus Brantheim
  • 83
  • 1
  • 4
1
vote
1 answer

How to reverse/descend/sort x-axis data in react-vis

I haven't been able to find this looking around the documentation. I'd like to show a graph with the x-axis rendering Dates & Times with the most recent data on the left. I had hoped that just reversing the data property array would do it but the…
Falieson
  • 2,198
  • 3
  • 24
  • 35
1
vote
1 answer

react-vis sankey captions and legend

I am trying to find a sankey diagram component for React. There is a wrapper for Vis.JS with D3 and D3 Sankey plugin - react-vis. It with little effort draws Sankey. There are a couple of problems - "an invalid" array nodes can bring down browser -…
Moshe Shmukler
  • 1,270
  • 2
  • 21
  • 43
0
votes
1 answer

react-vis: x with multiple y to display chart

I have a project that contains several interfaces, and among these interfaces there is an interface to display a set of statistics, I am using react-vis library. But the problem is that I want to display the values as shown in the image: I have one…
Hiba Youssef
  • 1,130
  • 1
  • 12
  • 34
0
votes
0 answers

Vis.Js Node Spacing options within a network with a lot of nodes

I am trying to space out the nodes between the various nodes that are in my network. Now, the network has a lot of nodes with many relationships between them. However, no matter how much I play with the layout and hierarchical options, the nodes are…
zhouf
  • 23
  • 6
0
votes
0 answers

React-Vis messed up plot area fill

I'm trying to create a line graph in React-vis. I've got most of it to look the way I wanted except the background color of the chart. Here's the code:
ujjain
  • 9
  • 1
  • 4
0
votes
0 answers

React Graph - % of times under values

Data : Times to do a task (5, 10, 15, 20, 25, 30 minutes for example) What I want : X-AXIS : % of times Y-AXIS : Times (5, 10, 15, 20, 25, 30, 35) Create a react graph that displays the % of times (X axis) that are below such or such value (Y axis)…
77140B
  • 41
  • 6
0
votes
1 answer

Insert the result of a sequence generated with for in a FlexibleXYPlot in clojurescript [SOLVED]

In this question (How to return two customSVGSeries from a single function in clojurescript), I learned how to insert the result of a function creating two customSVGSeries into an XYPlot. Now I want to insert the result of a for calling that same…
Luis López
  • 159
  • 8
0
votes
1 answer

How to return two customSVGSeries from a single function in clojurescript

I would like to draw two different customCVGseries using a single function; but, of course, this code (striped to a minimum) only returns the last one: (defn make-label-with-line [x y key] ^{:key key} [:> rvis/CustomSVGSeries…
Luis López
  • 159
  • 8
0
votes
1 answer

Can't draw a line in the g element of a CustomSVGSeries in react-vis and clojurescript

In the following working code: [:> rvis/CustomSVGSeries {:data [{:x x :y y :customComponent (fn [] (r/as-element [:g {:className "etiqueta"} …
Luis López
  • 159
  • 8
0
votes
1 answer

Can't make CustomSVGSeries work in clojurescript

I'm trying to translate this example in clojurescript (https://uber.github.io/react-vis/documentation/series-reference/custom-svg-series): const myData = [ {x: 1, y: 10, customComponent: 'circle', size: 10}, {x: 1.7, y: 12, size: 20, style:…
Luis López
  • 159
  • 8
0
votes
0 answers

How to get yDomain value in ReactVis

In React-vis, I display the cursor position of the mouse using a LineSeries. I would like it to extend along all the vertical extent of the FlexibleXYPlot in which it's included: Image of the cursor on a ReactVis plot ¿How can I get the value of the…
Luis López
  • 159
  • 8
0
votes
0 answers

Accessing Variable from Imported React Component

There's a number of posts addressing some variant of the question - and amongst the most popular suggestion was to re-design the parent-child hierarchy to align with the react principle of having a unidirectional flow of data. I am currently working…
kevqnp
  • 153
  • 10
1 2 3
4
5 6