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
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 embedded a mongoDB chart into a react component, using the SDK. The chart works great, now I want to add a filter to send in the user's team_oid.
I carefully followed the Filter Embedded Charts instructions here
When I create the chart without a filter it works great:
chart = sdk.createChart({
chartId: "6e12970a-a356-490f-a322-464153ad0080"
})
But... When I add a filter, it stops working:
chart = sdk.createChart({
chartId: "6e12970a-a356-490f-a322-464153ad0080",
filter: { team_oid: mongoose.Types.ObjectId("603f8ceda2e7b500043ffe60") }
})
It only shows the title of the chart, but no data (the chart is blank). It acts as if there is no data for the filter.
Here is the render logic:
chart
.render(document.getElementById('trust_chart'))
.catch(() => window.alert('Chart failed to initialise'));
}
Is this how filtering works? Is this typical for SDK queries?
Any tips or suggestions appreciated!
I discovered my mistake, so posting the answer here to help others.
The code above is correct
The issue was two parts:
The filter settings in Mongodb Charts were not configured to allow outside filtering
The test data I was using in localhost was incomplete and filter came back blank
I hope this is helpful for future observers.
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
I use ant design bar chart in my react project.
https://codesandbox.io/s/9qmjm0k7yw
Doc: https://pro.ant.design/components/Charts
I want to show the data with x-axis as date format (29/09/2018 for example). If I show like 30 days, it would not have enough space for all the label so it looks weird.
I want to hide the label of bar chart. Like this
if (more than 15 days) chart shows label
else hide label
Or is there any way that I show the chart for 30 days but only show the label for let's say 10 days?
How can I hide the label?
Unfortunately what you want to do is not supported by Antd-Pro Charts. It is stated in the docs that they designed the charts components with focus on ease-of-use over customization.
However Antd-Pro Charts are just a simplified subset of BizCharts (which itself is a port of G2) with reduced api options. If you need complicated chart options consider using the parent BizCharts library instead. You can do what you want by adjusting the < Axis > object in BizCharts.
In my example below, I have used a Column chart with x field of "week" and y field of "views". I did not want to display the label on the x field.
render() {
// console.log(this.state.data)
const config = {
data: this.state.data,
title: {
visible: true,
text: 'Your Stats',
},
xField: 'week',
yField: 'views',
meta: {
week: {
alias: " "
}
}
};
return (
<React.Fragment>
<Column {...config} />
</React.Fragment>
);
}
The data used is as follows:
Which yielded this outcome:
In order to develop your own project, I strongly recommend that you keep all of your software business in your own project, and use third party libraries just for their own business, rather than manipulating your software business because they simply change these libraries and To apply these changes, you may need to do a lot of work.
it does not only give you more performance but also increases your ability to develop.
for your topic, you can simply get an array and handle whatever you want and pass your processed array to component
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.