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
Related
I am developing a datetime series line chart of efficiencies (in percentage) over time.
I need a tooltip to display information about each point on the chart, but I am finding that it is difficult to hover over points which coincide with the line or marker of another series.
The chart will be static in nature in that users will not be able to remove series from the chart - so they wouldn't be able to remove a series in order to be able to get more easily hover over the desired point.
In this demo - https://jsfiddle.net/slaws/37y4cteq/10/ - it takes many attempts moving the cursor in that area to get the tooltip for the last point in the series with the black markers to show.
Here
I moved my cursor around the area marked in red, but couldn't get the tooltip for any points other than one shown to display.
I had to follow a specific procedure and get my cursor to a specific point to be able to hover over the black marker and get the tooltip to display. Here
I had to hover over the second to last black marker and then move the cursor to the point indicated to get the tooltip for the last marker to display.
I have tried using the findNearestPointBy (x, y and xy) in combination with stickyTracking (true and false), with no improvement.
"stickyTracking": false,
"findNearestPointBy": 'y'
I read something about a direct hover mode rather than nearest neighbor but found no details about how to implement that.
Any guidance on how I can make it easier for my users to display the tooltips in my use case would be greatly appreciated!
Setting tooltip.snap as 0 and setting back stickyTracking to default options fixes your issue.
Demo: https://jsfiddle.net/BlackLabel/54q2eubd/
API: https://api.highcharts.com/highcharts/tooltip.snap
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.
I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.
I am rendering a chart using Highcharts.js library
$('#container').highcharts({
title: {
...
I have some checkboxes to select which series to plot. Depending which series I plot the first time, the colors will be different.
How to reproduce
Go to the example: http://jsfiddle.net/1u98o3aq/1/
Select only "Tokyo" checkbox, click plot
Select "New york" checkbox, click plot
Select "Berlin" checkbox, click plot
...
As you can see, it is not using all the colors, all of them are plotted in blue.
You can now unselect everything, plot. Then select everything, plot. The 4 series will remain all with the same color.
However, if you start (Run) the example again, and this time select everything and plot, now it is rendered correctly. Now you can unselect everything and go one by one. The colors are right.
If you select now only the 2nd and the 3rd series, the 2nd and 3rd colors will be used (no blue).
It is like Higcharts is caching for each series a color (which should not) and chosing wrongly (starting from color 0) when adding more series to be shown.
Using custom colors does not solve the problem.
I think that your problem is connected with how you are loading your series to your chart.
Right now, when you are loading the new chart, you are basing into previously drawn series (you are updating the series array).
To avoid the problem you have, you should be able to make copy of your array before you will load it into your chart:
lastSeries = $.extend(true, [], seriesSelection);
Here you can see an example how it can work: http://jsfiddle.net/1u98o3aq/3/
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.