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
1
vote
1 answer

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 tooltip at November and December with explanation…
karczewski
  • 96
  • 1
  • 5
1
vote
0 answers

Can't use Nivo tooltip or crosshair draggability on mobile

I'm trying to create a line chart that uses crosshairs and tooltip using Nivo. I was able to get everything working great on desktop, but on mobile, when I try to drag across the graph with my finger, nothing happens. The only time the crosshair and…
frankied003
  • 466
  • 6
  • 26
1
vote
0 answers

Adding D3 zoom feature to Nivo heatmap in react

I have a react application that uses a responsive heat map from Nivo. I'm having trouble implementing zoom functionality from d3. I've tried following examples Example1, Example2. As far as I'm aware Nivo generates an SVG but when I click/mouse roll…
Sean
  • 11
  • 1
  • 5
1
vote
1 answer

Displaying dates in Nivo Line Chart start at day - 1

I try to implement a line chart using Nivo library. What I want to display is just an array of submission count by day. My array looks like: const data = [ { id: 'Submission', color: 'hsl(213, 70%, 50%)', data: [ { x: '2021-03-01', …
Jonathan Anctil
  • 1,025
  • 3
  • 20
  • 44
1
vote
0 answers

function to show Key in nested object?

I've got a chart component here with simple data, dates and temperatures.What i wanted the table function to do is to log out the results array Only (ideally with just the Date key) on the console. The table function is passed onto the OnCLick on…
Shuib Abdillahi
  • 119
  • 1
  • 10
1
vote
0 answers

Nivo d3 react chart - How can i set the bin-size and y-axis for nivo chart

Im using nivo.rocks which is a library built on top of d3.js. I need to build a marimekko graph like the histogram shown below. I want it to show the number of days a temperature was x faranheit. I'm trying to set the x-axis as the AvgTempF from…
Shuib Abdillahi
  • 119
  • 1
  • 10
1
vote
1 answer

Why Legend's text in Nivo Bar Charts doesn't show

I am trying to use this library for charts in React: https://nivo.rocks/ I have copied the exact same example in the docs for the horizontal column chart (bar chart) but on my env, the legends are simply not shown. I have looked for all other issues…
sale108
  • 577
  • 7
  • 22
1
vote
1 answer

Nivo charts tooltip is hidden behind other charts

When putting multiple charts tooltips from charts are hidden behind others. Also, I am using custom tooltips for this picture, the default tooltip also shows in the same way.
Pranjal Suyal
  • 103
  • 2
  • 6
1
vote
0 answers

Is there a way to scale negative y-axis tick differently from the positive in nivo

Is there a way to create a chart like the one on the image in nivo? I need to scale the negative tick values on the y-axis differently from the positive tick values. Positive tick step is much smaller, but the scale should be the same. I tried to…
taubi19
  • 382
  • 3
  • 9
0
votes
0 answers

Nivo Pie Chart - Custom Arc Labels

I have a nivo pie chart in my react application. In this particular pie chart, there are quite a few data points. As such, when the enableArcLinkLabels is true, it looks very messy. I'd like to show the arcLinkLabels only onMouseEnter of each data…
sfhasfasf
  • 55
  • 5
0
votes
0 answers

Line chart using Nivo and React

I am relatively new to charts and trying to create a line chart using nivo.rocks to display stock prices for varying time frames such as 1day, 3 months, 1 year etc. So far the results I'm getting seems to be a horizontal trending lines or random…
mnkcoder
  • 1
  • 1
0
votes
0 answers

Months out of order using Nivo's ResponsiveBar

Using Nivo's Responsive Bar (official docs here) and React, I've managed to create a bar chart with data showing up but the months on the X-axis are out of order. Here's the code and currently the X-axis is ordered by indexBy="month" return( …
Benjamin
  • 37
  • 6
0
votes
0 answers

Nivo format y axis for any chart type

Can anyone help me on how to format the y-axis in Nivo with any type of chart, my scenario is that I want to show the data example: 0, 4000, 8000, 12000 etc. But now in Nivo it always shows 0, 2000, 4000, 6000 etc. I assume it shows multiply/modulo…
Muhammad Haekal
  • 477
  • 6
  • 22
0
votes
1 answer

Remix.run and Nivo charts

I have a problem using Nivo charts with remix.run. Can't compile, error: Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\tomer\Code\remix-es\node_modules\d3-color\src\index.js from…
momi
  • 332
  • 1
  • 5
  • 17
0
votes
0 answers

React gets non responsive when data from Django is used to display a Nivo line chart

I have been trying to display a nivo line charts using data from my backend (Django). However, when the data is inserted into the nivo line chart, the react window gets unresponsive. The backend sends the timestamps and the values like this…
Suprava
  • 69
  • 6
1 2
3
4 5 6