*Highchart* tooltips format - javascript

I have an area percent chart similar to this example: http://www.highcharts.com/demo/area-stacked-percent.
Everytime I point my mouse to the graph, the tooltip show all the values which located in the same column, for example: Asia, Africa, America,.... I want to ask is it possible to format the tooltip so that it display only the value of the point that my mouse point to, for example when I point to Asia, it display only the value for Asia and so on, not all the values in the same column
And one more thing with the tooltips is even when I point my mouse outside of the graph, the tooltips still be displayed like this: . How can I fix it ?

If you set the shared-Property of the tooltip to false (or remove it completely, since 'false' is the default) then it will only be shown for individual points.
tooltip: {
shared: false
}

Related

Ploty.min.js Always Display Data

I am fairly new to Ploty.min.js. The chart I am using is a line graph with a simple Y as values, and X as dates. When the user hovers over a data point it displays the data. My Goal is to pass into the layout or configuration of this chart a true or false to display all of the data as if they were being hovered over at all times.
I've seen hovermode as a layout option, but that either displays the data when hovered or not at all. I'm currently away from my work station so I can't display any code as of right now.
In the image below you can see that I have hovered over a data point and it shows the data. I would like all of the data values be displayed as if they were all being hovered over all at once.

Highcharts: is it possible to show all data labels in a bubble chart without them overlapping?

I'm building a Highcharts bubble chart and am running into a challenge formatting the data labels. The data will be regularly updated, so there will be plenty of times when the bubbles either overlap or are very close to each other.
By default, labels that are very close to one another will be omitted. However, my requirements for this chart include showing the data labels for all bubbles, regardless of their position (therefore, I'm setting allowOverlap to true).
Here is a variation of the demo bubble chart that shows my issue (see also the screenshot below): http://jsfiddle.net/brightmatrix/Lxw7koey/. Note how the labels for Portugal and Hungary run into each other at the bottom left, and how Finland and Sweden are very close together towards the center.
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.country}',
allowOverlap: true // shows all data labels, but overlap occurs
}
}
},
Is there a way to offset the data labels so they won't overlap or collide? Because the data will constantly change with each update, I can't rely on a manual offset (either through x or y positioning) or alignment to solve this problem.
For reference, I looked at the following related questions:
Highcharts bubble chart dataLabels overlapping despite z-index
Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top

Chart.js - How to place text outside of radar chart

I'm using Chart.js to build a radar chart. I have seven datasets grouped by color as seen in the image below:
I would like to place the dataset labels outside of the chart, in the center of each dataset sector (at the crosses in the image). Does anyone know if this is possible?
You could probably basically accomplish this by doing roughly the following:
Specify a non-empty label only where you'd like the group label to appear (e.g. for every sixth datapoint or something similar)
Then set the tooltips.callbacks.label option to return the label for each point so that they still appear in the tooltip as they originally would

AmChart second value axis display missbehaviour

I have an amChart with 2 value axis. When the categoryAxis.autoWrap is set to true and the label does not fit, the chart is not drawn correctly, the second value axis is out of view. When resizing the container, sometimes is ok, sometimes not.
Here is an example in jsFiddle.

Highcharts - Series tooltip doesn't work when plotting lines that zigzag on the x axis

I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.
From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.

Categories