"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
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 Nivo doesn't support this, has anyone found a…
Rinor Jahaj
- 1
- 1
0
votes
0 answers
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
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), the chart is rendering fine & working but when the user click…
Abdallahsh96
- 1
- 1
0
votes
1 answer
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() MUI component.
What can be the core problem…
ForestG
- 17,538
- 14
- 52
- 86
0
votes
2 answers
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 ... {[Key: string]: string;}
Record utility type …
GatesKennedy
- 675
- 4
- 11
0
votes
0 answers
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/viewership (1 list for datetimes (ISO) of when they…
cyber
- 11
- 1
0
votes
0 answers
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 next to the number for example on the second point…
Jakub
- 2,367
- 6
- 31
- 82
0
votes
0 answers
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,
centerX,
centerY
}: SunburstCustomLayerProps)…
0
votes
2 answers
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.
When I load the page, it is empty. See…
tommsyeah
- 121
- 3
- 10
0
votes
1 answer
Align axisLeft labels to the left
I am using a @nivo/bar chart like below
Shmili Breuer
- 3,927
- 2
- 17
- 26
0
votes
1 answer
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?
user42195
- 419
- 4
- 16
0
votes
1 answer
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 problem
Parcial JSX File
export default function…
Iury Abreu
- 1
- 1
0
votes
1 answer
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: "2020-08-13",
Region: "South",
Product_Name: "Stacking Chairs",
…
faisal-akbar
- 33
- 1
- 7
0
votes
1 answer
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: "2020-08-13",
Region: "South",
Product_Name: "Stacking Chairs",
…
faisal-akbar
- 33
- 1
- 7
0
votes
1 answer
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 tooltip. I copied the code I directly from the docs…
DonCarleone
- 544
- 11
- 20