Stack Overflow
Stack Overflow

Questions tagged [nivo-react]

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

Homepage: nivo.rocks

85 questions
2
votes
1 answer

How can I show 0 value in @nivo/bar graph, or is there any way to show No Data label if the value is 0 coming from api

I want to show 0 value on the Nivo Bar Graph, when the value is 0 it's now showing any line, is there any way to show 0 value in Bar graph. How can we add a No Data label if the value is zero on the graph line? Graph Image In the above picture link,…
Hamza Syed
  • 44
  • 3
1
vote
0 answers

nivo pie chart, typescript, is missing the following properties from type 'unknown[]': length, pop, push, concat, and 31 more

import { ResponsivePie } from '@nivo/pie' import { data } from './Data' export const PieChartDemo = ({ data: any }) => (
1
vote
1 answer

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 created an example to reproduce the…
JeanValjean
  • 17,172
  • 23
  • 113
  • 157
1
vote
1 answer

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 What I tried is axisBottom={{ format: value =>…
lazy.lizard
  • 834
  • 6
  • 11
1
vote
0 answers

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 line representing that level set on each bar.…
Adam
  • 11
  • 1
1
vote
3 answers

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 to be triggered once the chart ResponsiveLine is…
Giardiv
  • 63
  • 12
1
vote
0 answers

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 chart isn't resized - only the width of the…
ethrbunny
  • 10,379
  • 9
  • 69
  • 131
1
vote
0 answers

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 components) goes blank. Any thoughts on how to fix this…
Phil
  • 21
  • 1
1
vote
1 answer

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 line to show the average value.attached image
Raviraj Jariwala
  • 51
  • 8
1
vote
0 answers

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 with the Nivo bar chart and it works. I change the…
Matt
  • 65
  • 4
1
vote
2 answers

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 met, by putting a div inside of the…
porFavor
  • 293
  • 4
  • 12
1
vote
0 answers

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 can be used in conjunction with dc.js. As nivo…
SD2007
  • 26
  • 3
1
vote
1 answer

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 zeros. The format of the data it expects is the…
ksenia
  • 13
  • 3
1
vote
0 answers

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': freq} ... I want to use data to plot the graph…
Ryan Marr
  • 83
  • 7
1
vote
1 answer

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": "^0.79.1". I have no idea to solve it. I would be appreciate if you could…
user42195
  • 419
  • 4
  • 16
1
2
3 4 5 6