Questions tagged [nivo-react]

"Nivo charts provides dataviz components, built on top of D3 and React."

Filter by
Sorted by
Tagged with
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…"....
  • 69
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), ...
  • 178
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?
  • 19
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 ...
  • 21
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 ...
  • 41
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(...
  • 17.2k
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/...
  • 11
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 ...
  • 2,237
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 ...
  • 11
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. ...
  • 111
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 ...
  • 105
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? ...
  • 409
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 ...
  • 65
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 ...
  • 10.3k
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 ...
  • 21
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 ...
  • 65
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 ...
  • 243
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 ...
  • 26
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 ...
  • 13
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"...
  • 409
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 { ...
  • 187
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 ...
  • 157
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 */ }) => ( <...
  • 526
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: &...