"Nivo charts provides dataviz components, built on top of D3 and React."
Homepage: nivo.rocks
Questions tagged [nivo-react]
85 questions
0
votes
0 answers
How to add count in a nivo pie legend
I need to show not only the name of the items presented in the pie but also justified to the right the count, something like the picture below
Michel Fornaris
- 352
- 3
- 14
0
votes
0 answers
Nivo responsivebarcanvas chart not working with large dataest
I am using Responsive bar canvas as it is suggested to use for large datasets. But, it is not working in my case and all the bars are overlapping on each other.
Can anyone please take a look and help if I am missing on something.
Check below link…
Pooja Bansal
- 159
- 1
- 9
0
votes
1 answer
Issue of rendering in react nivo/radar
I got an issue while trying to render a radar chart using nivo/radar.
Here is the result I got
The dots are not aligned.
It happen after pushing data to the component (update of chart).
Here is the set of data:
data1: 2.7
data2: 2.7
data2:…
G. Frx
- 2,350
- 3
- 19
- 31
0
votes
0 answers
Adding Annotations to Nivo Geo package library
I want to add annotations to my ResponsiveLine chart. Is it possible to do it? I only could add them to Bar charts. I am using the Nivo geo Library for React.
Do you have any idea about doing that?
This is my current component:
function Graph({…
Pablo Alaniz
- 163
- 1
- 8
0
votes
2 answers
implement mixed nivo chart
Can anyone help me how to implement mixed chart (Responsive Bar & Line) chart using nivo chart nivo docs, I've tried to follow some of example like this codesandbox, but the line won't show.
Here is the structure of my data:
"data": [
{
…
Muhammad Haekal
- 477
- 6
- 22
0
votes
0 answers
React JS, Nivo line chart incomes & expenses
I am trying to show some data into a nivo line chart. If i only send expenses via an API everything works fine, but when i want to add incomes to the mockData state which i'll pass it to the nivo line chart, it won't gonna show in the line chart +…
GeorgeAnghel114
- 73
- 6
0
votes
1 answer
Getting errors from Nivo Line Chart
I want to use a Line Chart from nivo.rocks, but everytime I resize the page I get lots of errors like Error: attribute transform: Expected ')', "…209394986644e-16translate(,),0tr…". and I don't know how to fix them. Can someone please explain…
alexsmt
- 71
- 7
0
votes
0 answers
unable to display a single year using @nivo/calendar
I'd like to leverage @nivo/calendar to display a year's worth of data (every single day of the year). All my dates are within the valid range. If I set the start date to 2016-01-01 (where YYY-MM-DD), I get two year calendars (2015+2016). Setting it…
rsilva
- 178
- 3
- 18
0
votes
1 answer
Tooltip on ResponsiveSunburst is not showing
I'm using nivo/sunburst to show a tooltip as it shows in the example but si not showing anyhting when doing onHover the sunburst chart
Avedis Maroukian
- 1,378
- 3
- 15
- 26
0
votes
0 answers
Replicating ESPN win probability with line chart
I'm trying to figure out how to replicate an ESPN win probability chart with line chart but can't figure out how to scale the axis. Any ideas?
alpo
- 19
- 4
0
votes
2 answers
React, Nivo: Passing custom valueFormat function as props to PieChart
I am trying to pass a custom valueFormat function as props so the arcLabels will be rendered with an trailing "%" to a PieChart.
While this works pretty well with simple expressions, I do not get it to work with an arrow function. I am fairly new to…
protoys
- 21
- 6
0
votes
1 answer
Sunburst Nivo Plot the only one not displaying, no errors
I followed this tutorial to get an intro to React and everything works as intended.
So I tried to add another of the Nivo plots, sunburst, following the same method.
My App.js imports this new scene
It also as the route set up
I've made a…
SteveAdmin
- 11
- 2
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
0 answers
Nivo line chart with X as dates and Y as number
I'm trying to implement a nivo line chart where the data from backend looks like this:
const data = [
{
id: 'events',
color: 'blue',
data: [
{
x: '2021-03-01',
y: 314,
},
{
…
Rinor Jahaj
- 1
- 1
0
votes
0 answers
How do i prevent Nodes in Nivo scatterplot from overflowing out of the chart lines
I'm new to Nivo, and I've been playing around with the docs to implement a scatter chart on a project. Everthing is working fine except that my node items in the chart overflows out of the chart area.
The Avatars go out of the chart area and I'm…
