I am trying to plot a series using a pie/radial chart to react. As per the documentation, I am passing the showAlways: true property that keeps showing a certain value in the middle of the chart even when the cursor is hovered or not hovered over the radial area.
But the following property does not seem to work in my case. Here is the link to the working snippet.
https://codesandbox.io/s/amazing-violet-wrp7y
I am not sure what's going wrong with the code here. Any help to resolve the same.
Your total.formatter function was not returning after calculating the total.
Here is the updated code
formatter(w) {
return w.globals.seriesTotals.reduce((a, b) => a + b, 0)
}
Updated CodeSandbox
Related
I am coding in typescript react js and I have a highstocks graph. The problem I need help with is that I need to show the values on hover on tags (div boxes) above the graph individual to each series plotted within. The values coincide with wherever the cursor is on the graph. Please help me to achieve this.
I am attaching an image for better understanding. The dotted line on the image is where the cursor is at the moment and I want to show the values: [128.32, 49.94, 1.01] instead of '--' next to each tag name: ['Throttle Valve, Posi', 'Mill Hydr. Unit, Gri', 'Water Injection, Pos']. Thanks
Image
Inside click events, you can access the nearest point using this.hoverPoint.
chart: {
events: {
click: function() {
console.log(this.hoverPoint)
}
}
},
Demo: https://jsfiddle.net/BlackLabel/8eym6jwo/
I was able to solve this problem. Appreciate everyone who helped out.
The solution (for getting an onclick point for multiple plotted series) is as follows:
this.hoverPoints?.map((item_hoverPoints, index_hoverPoints) => {
temp_trackValues[index_hoverPoints] = Number(
item_hoverPoints?.series?.points[this.hoverPoint?.index]?.y
).toFixed(3).toString();
});
Thanks
I have an AngularJS application in which I am using highcharts-ng version 0.0.86. I am generating the highchart by the following code
<highchart config="highchartsNg"></highchart>
The chart gets properly generated with this dynamic id "highcharts-2i5ujpv-2"
But whenever I type $("#highcharts-2i5ujpv-2").highcharts() in the browser console, it gives me undefined.
Also, I have other charts in my app for which I am creating the chart using jQuery inside a div container and it works fine. eg
<div id="multi-chart-container"></div>
$("#multi-chart-container").highcharts(chartconfig);
I need to understand why I does it give me undefined in the first case
Thanks in advance
Highcharts creates it's own div element with dynamic id. You need to get one level higher to get the chart:
$("#highcharts-2i5ujpv-2").parent().highcharts()
Live demo: http://jsfiddle.net/BlackLabel/5eq6yhg3/
I'm having trouble getting stacked column chart to animate when I perform setData on the series.
If the dataset has a lot of data points and the value of each data point in the dataset is also larger, the chart does not animate.
Has anyone experienced this issue?
Here is the fiddle that works correctly:
https://jsfiddle.net/AdityaParab/3f8vb5L7/
And this the the same code with much complex dataset
https://jsfiddle.net/AdityaParab/ow6yaen7/
How do I make it so that the animations work fine with complex dataset?
TIA
You need to increase animationLimit property:
plotOptions: {
series: {
animationLimit: 9e9
}
}
Live demo: https://jsfiddle.net/BlackLabel/c37mw1zj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.animationLimit
I am using create ChartJS for create chart.And system provide facility to search data in date range. When searching new rage load chart corectly, but when focus to chart old chart values display again.
To solve that remove previous canvas content and load new canvas using
$('#line').remove();
$('#chart_container').append('<canvas id="line" height="600px" style="margin-top:20px;" ></canvas>');
After that fix chart load properly, but browser console display bellow error
This happens because the events (resize) are binded at creation and there is no check whether the canvas exists or not in the resize handler.
In order to prevent this issue, you can modify the resize function and insert the following line before everything else:
if( !this.canvas ) return;
Instead of removing the chart, you can update your datasets like this:
myChart.chart.config.data.labels = myNewLabelsArray;
myChart.chart.config.data.datasets[0].data = myNewDataArray;
myChart.update();
I remember having a lot of problems with old data displaying, and this is what fixed it for me. Not destroying, just updating.
You're removing the plugin as well as the old HTML element. Try re-iniciating the ChartJS library after appending the new HTML.
I use kirjs/react-highcharts plugin for react but I have no idea how to get Highchart component in order to call reflow like: $('#container1').highcharts().reflow()
From docs its tells:
For access to methods & properties from the Highcharts library you can use ReactHighcharts.Highcharts. For example, the Highcharts options are available via ReactHighcharts.Highcharts.getOptions().
but I don't see there any reflow() method.
Any ideas?
Edit
its located under ReactHighcharts.Highcharts.charts so I can call
ReactHighcharts.Highcharts.charts[0].reflow()
but it has list of all highchart instances so I have no information what index is mine
I am using highcharts-react-official and highcharts. They are available via npm . Although I am using different packages, the working principle should be the same.
The way of using reflow() function in react-highchart is also Highcharts.charts[i].reflow(). I have prepared 2 code sandboxes for the demonstration. The first code sandbox shows the way of re-flowing every chart, and the second code sandbox shows the way of re-flowing a particular chart.
The first code sandbox link is here.
There is a button on App.js to hide and show highchart divs.
The child component is React.memo (for performance optimization), therefore the hidden highchart will not be auto resized after it becomes visible.
To let every chart window resize with respect to the window size. The following code is placed in App.js. It looks for all existing charts and re-flow them:
for (var i = 0; i < Highcharts.charts.length; i++) {
if (Highcharts.charts[i] !== undefined) {
Highcharts.charts[i].reflow();
}
}
The second code sandbox link is here.
Almost the same as the first code sandbox, but there is a ref array of referencing every chart.
The chart which needs re-flowing is placed with an id in its chart option.
Iterate every chart and get the index of the chart with that id e.g. "secondChart" for this example.
for (var i = 0; i < chartRef.current.length; i++) {
if (
chartRef.current[i].chart.userOptions.id !== undefined &&
chartRef.current[i].chart.userOptions.id === "secondChart"
)
Highcharts.charts[chartRef.current[i].chart.index].reflow();
}
Re-flow that chart.
The Reflow can be set with event load in options.
Workaround: You have to set reflow() using setTimeout() this will trigger the resizing. Time is set to 0 to avoid delay.
Solution
const options = {
chart: {
type: 'column',
style: {},
events: {
load() {
setTimeout(this.reflow.bind(this), 0);
},
},
},
title: 'Column Chart',
}
Usage
<HighchartsReact highcharts={Highcharts} options={options} />