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
9
votes
2 answers

How to add custom color theme in nivo chart settings

I am using Nivo charts in one of my projects and I have implemented nivo chart settings as they have implemented them in their website. However, I wanted to add a few of my own custom color theme options additional to what nivo provides. For more…
Pranjal Suyal
  • 103
  • 2
  • 6
7
votes
2 answers

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 { ResponsivePie } from "@nivo/pie"; export const data = [ { …
Quentin C
  • 307
  • 3
  • 13
5
votes
1 answer

Colors from data not being displayed in Nivo ResponsiveBar

I have a ResponsiveBar component in my React app, but the colors are not being displayed as intended. I have followed the guidelines in the official docs. the data looks like this: { "data": [ { "bucket": "Prospects Imported", …
vikrant
  • 2,169
  • 1
  • 21
  • 27
4
votes
1 answer

You may need an additional loader to handle the result of these loaders error showing in terminal when i installed nivo charts in my react app

Error Message ./node_modules/@react-spring/web/dist/esm/index.js 113:11 Module parse failed: Unexpected token (113:11) The file was processed with these loaders: *./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an…
Znoy
  • 97
  • 5
4
votes
1 answer

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 */ }) => (
LeCoda
  • 538
  • 7
  • 36
  • 79
4
votes
1 answer

is there a way to make onClick hanlder on a bar on Nivo charts?

I'm new to Nivo.rocks, a react based charts library. Im trying to add a click handler to a bar to just console.log the data on that bar. currently the component comes with its own 'tool tip' that shows this data when you hover over a bar but i dont…
Shuib Abdillahi
  • 119
  • 1
  • 10
4
votes
1 answer

Export a nivo chart/diagramm as image in React

I am using a nivo library for charts. I want to export as a PNG/JPEG image some react component that are using a ResponsiveBar internally. The problem is this functionality is not built-in in the library. I have components structure like…
Spongi
  • 501
  • 3
  • 10
  • 19
3
votes
1 answer

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 radius as well thank you
vertigo
  • 125
  • 8
3
votes
0 answers

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 bottom of the graph and the ticks. How can I make…
MinBaeBae
  • 31
  • 2
3
votes
1 answer

Nivo ResponsivePie not being responsive

I'm trying to replicate the Nivo Size Pie, where when you hover over a piece of the pie, that piece is enlarged based on activeOuterRadiusOffset & activeInnerRadiusOffset values, however in this case the hovered over piece is not changing in size. I…
Garo
  • 129
  • 1
  • 8
3
votes
2 answers

Unable to resolve path to module '@nivo/pie'

I'm trying to use Nivo Pie Chart, it's giving me this error on import: Unable to resolve path to module '@nivo/pie' import { ResponsivePie } from '@nivo/pie'; Trying to figure out what needs to be installed, any help appreciated.
Afaq Ahmed Khan
  • 2,164
  • 2
  • 29
  • 39
2
votes
0 answers

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 it's not what I need. When someone asked the…
arvidrus
  • 157
  • 2
  • 14
2
votes
1 answer

React Nivo dashed line

I'm trying to create a react nivo line chart, with a dashed line instead of just a solid one. I've looked into patterns but I have no clue how to make one. Any help is appreciated.
frankied003
  • 466
  • 6
  • 26
2
votes
1 answer

How to add custom script before build in react?

There is an error with the Chart library that I'm using, and to fix this I should run this script: https://github.com/plouc/nivo/blob/master/scripts/patch-react-spring.js. prior to build. I have thought of adding "prebuild":"npm run…
Julien Müller
  • 93
  • 6
2
votes
1 answer

How to prevent text truncation in Nivo ticks' axis text (Bar Chart)

My Y-Axis keys (or ticks) are pretty long, and they're being truncated But it's not due to lack of sufficient width for the graph itself, using the inspect tool, I can see there's enough space allocated for it, but the frame that is allocated to the…
sale108
  • 577
  • 7
  • 22
1
2 3 4 5 6