For a Highchart bubble chart I've got a hook in the chart events for render such that it looks at the bubble and datalabel and that relocates the datalabel when an overlap with another label occurs. It also figures out the x,y of the bubble and datalabel and draws a leader line from the label to the bubble. That works pretty well except for the case when the legend item is clicked to filter the bubbles. When Highcharts moves stuff around in this case, the render event series data has the x,y values from BEFORE the move which goofs up where the lines are drawing to.
Optimally, I'd like like know when the chart is completed renderering after the legend filter changes, then I can run the same logic to avoid collisions. At the moment, the collision logic I have is getting the location values before the legend filter process has laid out the elements. When I debug and toggle on/off the legend filter I see the new location in the series point datalabels so it leads me to believe the new values are there after the legend filter layout does it's thing.
Related
I have created this graph in c3 chart. Those two circles on red line are selected point. When I click on these points, they are going invisible. Also when I click on other points of green and red line. They are also selecting like these two. Is there any procedure to disable selection of other points ?
I don't want to select other points. When I click on other points, they are also selecting like
I am declaring c3's selected points by :
chart_tracker.select(['data2'],[19,47,]);
try removing the click event that c3 listens to to update these circles (add after chart is set up):
d3.select("#chart").selectAll(".c3-event-rect").on("click", null);
change #chart to whatever the id of your chart is ^^^
you might need to put this in c3's onrendered callback if your chart updates as the click function may get restored by c3
https://institutional.fidelity.com/app/item/RD_13569_45180/the-art-and-science-of-investment-decision-making.html
There is a very nice graph and pie chart under Investment Decision-Making in 2016.
I know it is highcharts now. I want to write something similar. But I can't find any chart type similar in its document.
Could you tell me what kind of chart it is? And how to put different data items inside the bubble.
It looks like a combination of line, bubble and pie series.
Line series (alternative: scatter with lineWidth > 0) lies under the bubbles. All interaction with this series should be disabled (hover state, tooltip, etc.).
Text inside the bubble is data label (dataLabels.enabled property should be set to true). You can manage its content in dataLabels.formattercallback function.
You can handle showing/adding pie (donut) charts in plotOptions.bubble.point.events.mouseover callback function. Text in the middle of a donut can be rendered via SVGRenderer.text().
All options that I mentioned can be found in the API: https://api.highcharts.com/highcharts/
Sorry to not include a fiddle as the highchart chart is tied tight to my application. Earlier the mouse events were getting tracked over the legends as well as the legend labels . For some reason these labels does not take the events anymore, rather it goes to the container holding the charts.
Any inputs?
Also when i try to inspect the above highlighted legend label, the parent container is highlighted instead of the label itself. The above problem is seen for other labels out of the plot area as well.
You can use custom-events extension which allows to catch this event on legend item.
legend: {
itemEvents: {
mouseover:function(){
console.log(this);
}
}
},
Example: http://jsfiddle.net/Utx8g/413/
I'm looking for an answer similar to a previous question:
Link: chart js tooltip how to control the data that show
But I need a solution for a Line Chart via Chart.js. I'm wanting a line chart with multiple lines and I would like each point to return only the data for that point in the tooltip. By default the tooltip returns data in a group for each point at the index you hover over. So I would want each point to only return it's data and have it's own tooltip box.
See default example of line chart : http://www.chartjs.org/docs/#line-chart
It would also be nice if I could have all the tooltips displayed by default and not triggered by a mouse hover.
I was wondering if there is a way to prevent Highcharts from recalculating and redrawing the scale of the Axis when I add a new serie.
What I need to do is the following: I have a scatter chart with a lot of data; when the user selects a point, I add a new series with a "line" type. This series' points are a limited sample from the previous ones, so no "real" new points are added, but the scale of the xAxis changes.
Setting xAxis' min and max value, startOnTick and endOnTick to true did not solve the problem. Any idea?
Edit:
As I wrote, the way Highcharts handles axis' scales is still a mistery to me. In my case, I was rendering one scatter and one column graph on the same canvas. In response to a user click, I was adding 2 new series: a line serie and a column serie each one based on a subset of the original data. The problem was caused by the column graph: when you add a new serie to a column graph, bars are not overlapped, but redistributed, thus creating the scale change effect.
Try to create the line series but hidden, and when you want to show it use chart.series[1].show().