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

How to plot time series graph using react-vis

I am using react-vis lib for visualization. can anyone tell me how to plot time series graph for following data? Thanks in advance. data = [ {x:"01/01/2018",y:75}, {x:"14/02/2018",y:60}, {x:"18/03/2018",y:80}, {x:"15/04/2018",y:90}, …
Shrishail Uttagi
  • 406
  • 6
  • 8
8
votes
4 answers

dark area in react-vis example

I'm trying to use react-vis. If I use the privided examples, I get black areas between the lines. What do I miss?
dmolnar
  • 175
  • 1
  • 6
7
votes
2 answers

Set 24 hours time format in react-vis time scale axis

I'm using XYPlot with xType={'time'} and Russian locale as described in documentation, is there a way to pass 24h time format to d3-scale? Instead of "03 AM" I need something like "03:00". Russian locale from d3-time-format has time defined as %H,…
miki noidea
  • 782
  • 5
  • 15
6
votes
1 answer

How to enable tooltip on React-vis?

How to enable tooltip on React-vis? I don't see tooltip on vizualisation, how can I see a tool on hovering the chart? In the case of SunBurst, there's an example…
awzx
  • 1,023
  • 2
  • 12
  • 31
5
votes
1 answer

React vis - Formatting time tick on the x axis

I have added the xType="time" to the chart to show the time scale on the x-axis. I am displaying data only for 25 seconds range. Currently, the x-axis is showing the time format as :SS. So the x-axis shows time in the following format (data showing…
xyz83242
  • 629
  • 14
  • 27
5
votes
1 answer

Add a vertical line in a react-vis chart where mousepointer is hovered

I'm evaluating react-vis. Let's say I have a react-vis simple chart, how would you add a vertical line that moves with the mouse when the chart is hovered? My guess is that I need to add a crosshair component inside the XYPlot, and maybe a YAxis…
burktelefon
  • 988
  • 2
  • 8
  • 27
4
votes
0 answers

Formatted date date on x-axis

I'm trying to display a line chart based on this data set: [ { x: new Date(2018, 1, 1), y: 0 }, { x: new Date(2018, 2, 1), y: 50 }, { x: new Date(2018, 3, 1), y: 150 }, { x: new Date(2018, 4, 1), y: 200 }, { x: new Date(2018, 5, 1), y: 340…
olefrank
  • 6,452
  • 14
  • 65
  • 90
4
votes
5 answers

Responsive pie chart with react-vis

I'm reading the docs on flexible charts and trying to apply them to a pie chart: import React from 'react' import { RadialChart, FlexibleXYPlot } from 'react-vis' const MyChart = ({data}) => (
Tomas Aschan
  • 58,548
  • 56
  • 243
  • 402
4
votes
1 answer

React-Vis - How Do I render an empty chart area?

I'm working on a react-vis chart that will dynamically update the data that is displayed when a user clicks on/off the legend item for that series. If a user clicks clicks off all of the series the JSX that I render essentially looks like this: …
Scott
  • 422
  • 1
  • 4
  • 17
3
votes
0 answers

set multiple color to single line lineMarkSeries Graph in react-vis

For My react Application, I need to create a line series graph with each point with a mark and color of the line should be changed when the x,y value progressing. I have used react-vis plugin for that and it will display the graph with nice curves…
Anoob K Bava
  • 598
  • 7
  • 19
3
votes
1 answer

Why do I get an "Unexpected identifier" error running "mount component" Jest test with react-vis chart?

I'm trying to run a basic "mount React component" test in Jest. The test is test("Create App component", () => { const div = document.createElement("div"); ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); }); The test…
dommer
  • 19,610
  • 14
  • 75
  • 137
2
votes
1 answer

React vis Line Chart not rendering properly

I am using react-vis library for one of my projects. I copied the source code of a sample chart from one of their examples on the site. I copied the example directly but still the chart does not look as expected. import React from 'react'; import…
user185887
  • 643
  • 6
  • 18
2
votes
0 answers

Tooltip with Multi Lineseries Chart with react-vis

I've plotted multiple Line series chart and enabled tooltip. When I do it, it's giving me the value of the last plot. How do I get the Crosshair values for multiple line series at the same time. Here is the code for the reference: const [tooltip,…
Sriharsha
  • 21
  • 3
2
votes
0 answers

Mutiple y axis value with same x axis in react vis graph

I am using react-vis graph for generating histogram data. The graph works fine if we have individual entries for x and y axis. But it fails and looks distorted when we have same x axis value and multiple y axis value and vice versa. Is there a way…
user1295308
  • 425
  • 7
  • 20
2
votes
1 answer

Bar series not rendering correctly under label using the react-vis library

I'm running into a problem. The bar series is not coming right under it's label. I can't figure out what is going wrong. Here is the code for it const FlexibleXYPlot = makeWidthFlexible(XYPlot);
Gardezi
  • 2,692
  • 2
  • 32
  • 62
1
2 3 4 5 6