Questions tagged [nivo-react]
"Nivo charts provides dataviz components, built on top of D3 and React."
78
questions
0
votes
0
answers
5
views
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?
...
-1
votes
0
answers
5
views
Nivo responsive bar/line/pie click on labels
Is there a way to click on the labels of a NIVO chart?
I need to redirect the user to a specific page when he/she clicks on individual label.
Is this supported?
Thank you!
I already did that for the ...
0
votes
1
answer
23
views
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 ...
0
votes
0
answers
20
views
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 ...
0
votes
0
answers
31
views
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: <g> attribute transform: Expected ')', "…209394986644e-16translate(,),0tr…"....
0
votes
0
answers
21
views
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), ...
0
votes
1
answer
27
views
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
<ResponsiveSunburst
data={data}
id="name&...
0
votes
0
answers
11
views
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?
0
votes
2
answers
106
views
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 ...
1
vote
1
answer
59
views
Markers not working in a Nivo ResponsiveLineCanvas
I'm trying to switch from a ResponsiveLine to a ResponsiveLineCanvas using Javascript library Nivo version 0.80.0 and React 18.2.0, but markers are just not shown.
Not sure what I am missing, so I ...
0
votes
1
answer
91
views
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
...
0
votes
0
answers
17
views
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 ...
0
votes
0
answers
192
views
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',
...
0
votes
0
answers
108
views
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.
...
0
votes
0
answers
235
views
Creating bush and zoom feature using nivo/line chart
question for Nivo library users.
I'm trying to implement a feature where you can brush and zoom line charts, something like this: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
Since ...
0
votes
0
answers
78
views
Is it possible to make x-axis values clickable in nivo charts
Is it possible to make x-axis values clickable in nivo charts to show desired output
looking for solution
0
votes
1
answer
90
views
Nivo Circle Packing, circles are moving/reordered on any action on page
I'm using React Nivo CirclePacking to represent data hierarchy & the relation between the hierarchy levels an example of levels can be: Year(depth 0) > Province(depth 1) > Citie(depth 2), ...
0
votes
1
answer
158
views
Nivo charts wont animate if its inside a styled MUI component
I am using @nivo/core and @mui/material.
After a lot of debugging, I was able to narrow down my problem: that our Nivo chart seems to be flickering and won't animate properly, if it is inside a styled(...
0
votes
2
answers
178
views
Typescript: How to define a type for unknown quantity of record patterns
I'm trying to use Nivo charts with typescript and I'm not sure how to define the type of data Nivo expects for their Bar Chart. (https://Nivo.Rocks)
I've been trying to use
Object Index Signature ......
0
votes
0
answers
28
views
React Dataviz: How to calculate AND display simple, but lots of data?
I'm currently undergoing a re-work of a basic analytics system I built. Let me explain the paradigm and data simply. In the database we have records for user analytics, tracking their attendance/...
0
votes
0
answers
62
views
Nivo ResponsiveLineCanvas axis multiline format
Having read @nivo docs and SO threads I've found no solution of my problem which is multi-line format of x-axis values.
I need to see date like this
2022.10.02
14:42:30
but is see 2022.10.02 14:42:30
...
0
votes
0
answers
85
views
How in Nivo line charts show next to the points vslue show the difference from the points before
I'm trying to understand how to add next to the Nivo line chart value the points differences from the points before
I have this example
CodeSandbox
From my example what I want to achieve is to add ...
0
votes
0
answers
40
views
Is there a way to add a mui component within a nivo sunburst?
I was wondering if it was possible to add the circular progress component
https://mui.com/material-ui/react-progress/ to the middle of a nivo-react sunburst.
const CenteredMetric = ({
nodes,
...
1
vote
0
answers
186
views
How can I use a custom layer for each bar using a nivochart
I would like to be able to provide a custom layer on each of my bars in a Nivo responsive bar chart. I have been using this guide as a reference. I am creating a warning level and would like to have a ...
0
votes
2
answers
567
views
Issue rendering Nivo's ResponsiveBar
I am trying to make a very simple bar chart using Nivo's Responsive Bar (official docs here) in my React application (React v18).
I have managed to set up a basic bar chart but it is acting funny.
...
0
votes
0
answers
304
views
Nivo Pie Chart ArcLinkLabels on hover
1
Hello everyone,
I'm working with Nivo's Pie chart and i would like to ask if is it possible to add the hover effect to show the arclabels and links (nr.2- see picture) and not the labels from nr.1 ...
0
votes
0
answers
9
views
Align axisLeft labels to the left
I am using a @nivo/bar chart like below
<ResponsiveBar
height="400"
data={barData}
keys={["value"]}
indexBy="label"
layout="horizontal"
...
2
votes
1
answer
314
views
How to make bars in @nivo/bar have border-radius top only?
When creating a stacked responsive bar from nivo library,
Can I make the bar of each stack have a border radius on their top and not bottom?
Responsive bar border radius applies it to the bottom ...
0
votes
1
answer
287
views
How to pass color props by Nivo ResponsiveBar?
I use Nivo's responsive bar.
I want to show a bar like the image. And I can do it if I set the colors directly like below . But I can set it by passing the props or set by a function.
How can I do it?
...
0
votes
0
answers
236
views
How to use native tooltip in Nivo Pie Charts
I need to show two informations on a tooltip in Nivo Pie chart (ID, Value) but the props that a configure are not effective.
Probably I don't need a custom tooltip, just a native tooltip solve my ...
3
votes
0
answers
227
views
on Nivo 1: How can I move the bars up to start where my minValue is set? 2: How can I make the y value to show on top of the bar within a circle?
I need help with two things!
My graph has different minValues. Some of them start at like 30 (as shown in the pic)
But when the min value is above 0. The bars tend to overflow and it covers up the ...
1
vote
3
answers
56
views
React: Trigger a function when a child asynchronously updates its DOM after rendering
Within ParentComponent, I render a chart (ResponsiveLine). I have a function (calculateHeight) calculating the height of some DOM elements of the chart.
To work fine, my function calculateHeight have ...
1
vote
0
answers
496
views
nivo responsivebar chart - bar width collapsing when screen is refreshed
Recently started using the Nivo charting library. Having issues with ResponsiveBar in that it draws nicely after a recompile but if I F5 reload the bars collapse to near zero width. The surrounding ...
1
vote
0
answers
301
views
Entering a height in the parent element of a Nivo Bar Chart causes the whole page to go blank
I understand that for a Nivo Bar Chart to display, its parent element must have a defined height. However, when I define the height in the parent element, the entire page (including other React ...
1
vote
1
answer
1k
views
How to add tooltip on "custom layer" in nivo bar chart?
I have used @nivo/bar for plotting bar charts in my react application.
added line to display average value.
on bars, the tooltip is working fine. I want to add a tooltip when the user hover over the ...
1
vote
0
answers
307
views
React - Nivo Charts - Chart not re-rendering when filtering
I have created a reusable component for my app. The line chart can be used in multiple places and features a 'filter panel'. This allows the user to filter by months.
I have implemented this before ...
1
vote
2
answers
933
views
Why is nivo's responsive line chart not rendered in jsdom when using Jest?
I am writing Ui tests for my app using Jest/Testing Library.
I am using ResponsiveLine component from @nivo/line
However, it never renders in jsdom.
I have confirmed the conditional of tableData is ...
1
vote
0
answers
117
views
ReactJS dashboard using dc.JS and nivo charts
I was working on a reactJS dashboard PoC, with data filtering/slicing capability across charts.
Zeroed on dcjs and nivo charts for their capabilities.
I would like to understand whether nivo charts ...
1
vote
1
answer
84
views
Nivo HeatMap not showing trailing zeros
I am working with Nivo HeatMap and I notice that for the y value, it always accepts a number and even if I force pass the .00 digits, it will still truncate and display the value without the trailing ...
1
vote
0
answers
154
views
Nivo ResponsiveLine data different thatn tooltip values
I have two Arrays with x and y values.
data - has a percentage associated with each month {'x': month, 'y': percent} ...
dataTotals - has a frequency value associated with each month {'x': month, 'y': ...
0
votes
0
answers
234
views
Nivo not showing any tooltip
I'm trying to mimic the tooltip shown in nivo homepage line graph. My code so far:
<ResponsiveLine
data={data}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{
...
1
vote
1
answer
617
views
ReferenceError: ResizeObserver is not defined:Gatsby with nivo
I use @nivo/pie with "gatsby": "^3.13.0".
But I got an error when I gatsby build.
WebpackError: ReferenceError: ResizeObserver is not defined
Nivo's version is "@nivo/pie"...
1
vote
1
answer
2k
views
Nivo line chart custom mesh layer
I have nivo line chart with gaps like this:
Gaps are covered by passing y/value: null in november and december in data series
Tooltip displays only on data points and this is correct, but I want add ...
7
votes
2
answers
4k
views
ReferenceError: ResizeObserver is not defined with nivo and NextJS
I want to use nivo with Next but when I load the page containing a pie chart made with nivo, I get this error: ReferenceError: ResizeObserver is not defined.
My Pie.js component:
import { ...
0
votes
1
answer
318
views
Transform array of Objects for React Nivo Bar Chart
I have the following data:
const rawData=[
{
Order_Date: "2020-08-11",
Region: "South",
Product_Name: "Bookcase",
Sales: 261.96
},
{
Order_Date: ...
0
votes
1
answer
324
views
Multiple groupBy and sumBy in array of objects using Lodash
I have the following data:
const rawData=[
{
Order_Date: "2020-08-11",
Region: "South",
Product_Name: "Bookcase",
Sales: 261.96
},
{
Order_Date: ...
2
votes
0
answers
2k
views
Control width of marker line in Nivo bar chart
I'm using the Nivo stacked bar chart to show a score range on the bar. To do this, I've used the markers prop. I've almost got it looking the way I'd like except the markers extend beyond the bar and ...
0
votes
1
answer
3k
views
React Nivo tooltip not working on some graphs
I'm using Nivo ResponsivePie to display some data and everything seems to be working find other than the tooltip. The tooltip is just not showing. I have a heatmap and bargraph which have a working ...
4
votes
1
answer
2k
views
trying to create line down a graph in nivo at set time intervals
I'm using nivo charts to visualize some sick datasets.
The example is like this,
import { ResponsiveLine } from '@nivo/line'
const MyResponsiveLine = ({ data /* see data tab */ }) => (
<...
0
votes
3
answers
65
views
I need to convert my array of objects into one object with specific keys
Good afternoon. I want to display the months of the year and the amount spent in each category.
Ex:
{Month: "January", Food: 610, foodColor: "#063951", Others: 121, othersColor: &...