Stack Overflow
Stack Overflow

Questions tagged [react-highcharts]

Highcharts component for react. Highcharts is a Javascript charting library that uses HTML, SVG, and VML. The editor offers both open source/nonprofit and commercial editions of the product.

409 questions
3
votes
2 answers

Resize High Charts based on grid layout width and height using react

I have a wrote a grid layout component in react. Inside the grid, I have loaded the high chart and it works great. On resizing the width and height of the grid, the high chart doesn't resize and it breaks when resizing. I have searched for stack…
smackbeta
  • 91
  • 2
  • 5
3
votes
2 answers

Using PieChart from highcharts-react-official

Is there a working example of using PieChart from highcharts-react-official [ https://www.npmjs.com/package/highcharts-react-official ] There is mention of PieChart tag on the below link, but I couldn't find any working example for it: Setting…
Nands
  • 379
  • 3
  • 19
3
votes
1 answer

Why mistake appears during render?

I'm using react-highcharts in my project. I want to generat chart-component dynamicaly and change their number according to user's choice. I wrote component and function which gets data and makes array of highcharts component and returns…
Sam Fisher
  • 746
  • 2
  • 10
  • 27
3
votes
1 answer

Gradient fill for react-highcharts' line chart

I have created a line chart using react-highcharts. And this is how it looks: . Now, I am trying to add color-fill gradient under the line and this is what I am doing: render() { let config = { chart: { animation: { duration:…
Arslan Tariq
  • 2,478
  • 2
  • 22
  • 45
3
votes
2 answers

creating a bar chart using Highcharts with React - getting an error that rendering div isn't found

I'm trying to create a bar chart with Highcharts in my web application, which uses React on the front end. Below is a snippet of my dashboard.tsx file, where I basically just copied and pasted the code from a JSFiddle…
MarisolFigueroa
  • 757
  • 1
  • 14
  • 31
2
votes
1 answer

Is there a way to implement react typescript highcharts mouse zoom in/zoom out?

I am using highcharts in React. I want to implement a zoom-in/zoom-out function when displaying a lot of data, but I don't know how to implement mouse wheel zoom-in/zoom-out in React. help. import React, { useEffect, useRef, useState } from…
LeeHoSeop
  • 35
  • 4
2
votes
1 answer

How to use Highcharts React to create chart with multiple lines for same XAxis?

I have a dataset containing a date value, and 3 other values. For example: { "minimum": "71", "maximum": "74", "meanAverage": "72", "dateTime": "2018-03-28T13:46:00" }, { "minimum": "57", "maximum": "87", "meanAverage":…
Tsarsko Petrovich
  • 23
  • 2
2
votes
1 answer

How to create such a `No Data` greyed out design pattern on Highcharts?

Design expected marked in red box How such a design can be achieved on highcharts?, especially the red box zone. The design on the red box area can be different gradient/color's but how to exactly mark such an area on high-charts without points? The…
Vishnu Prasad.B
  • 21
  • 4
2
votes
2 answers

How can I disable the Highstocks range selector buttons when loading data asynchronously?

I'm creating a chart similar to the Highcharts lazy loading example where I'm retrieving data from my backend service every time the user zooms in via mouse drag or interaction with the navigator. Clicking on the range selector buttons works…
Spagheddie
  • 21
  • 1
2
votes
2 answers

Can't access custom point variable inside Highcharts tooltip.headerFormat

I have a highcharts graph with some value in the y-axis and datetime in the x-axis, however because the data I'm presenting is quarterly, I would like to display the name of the quarter and not the actual date on the tooltip. To accomplish this I've…
PanRagon
  • 93
  • 8
2
votes
1 answer

Highcharts - what is it about my data that causes "setExtremes" to not work correctly?

I'm building a Gantt milestone chart that shows certain milestones from multiple projects, and each of the projects can be considered part of a "group". When the chart initially loads, I show all the projects, and I set a custom zoom level of Jan 1…
Dylan Cristy
  • 916
  • 11
  • 29
2
votes
2 answers

Radar Chart Not working in React Highcharts

I want to render the radar chart using react high charts, But after writing below code, i am getting the line chart format not exactly the expected output i am achieving, Which i am trying to get the chart in radar format. { …
mantena varma
  • 51
  • 6
2
votes
1 answer

Highchart / Highstock stack column chart show one series's tooltip at a time

Here is the code and image where i want tooltip one at a time with limited info:- If I am hovering over India West data it should show India West data only Working code example with issue…
Preet Saxena
  • 127
  • 1
  • 10
2
votes
0 answers

How can I integrate Highcharts with TinyMCE in React

I have data for Rich Text Box coming from backend, I populate timyMCE with that data. I can see everything except the Charts which are integrated using Highcharts. How can I show these charts in TinyMCE Rich Text Box in react.
Amanullah Soomro
  • 21
  • 3
2
votes
2 answers

How to draw a bubble map with longitude and latitude using Highcharts in react

I want to draw the map with bubbles (bubble map) on it in react project using Highcharts library. These are my requirements: drawing the map showing the specific points/locations (bubbles) on the map. (we have longitude and latitude of the…
Zahra Talebi
  • 675
  • 4
  • 11
  • 26
1
2
3
…
27 28