Highcharts how to remove headers from tooltip - highcharts

How to remove the 0 above Kosten?
I suppose I should add something to series to hide it.
My highcharts script
Any suggestions?

You will have to look into the tooltip options:
http://api.highcharts.com/highcharts#tooltip
I added the following bit of code that removed the numbers above kosten
tooltip:{
headerFormat: '',
},
It basically replaces the values from the x axis (0,1,2, etc) in the tooltip with an empty string, therefore it doesn`t appear.
Working example: http://jsfiddle.net/4pp1zhfb/5/

Related

HighCharts: Multiple X and Y Axis tooltip doesn't appear (custom formatter)

I am working on a chart having multiple x and y axis. Data series is linked to these x and y axis. I have a tooltip which is shared and uses html and custom formatter. Below is the configuration of tooltip:
enabled: true,
useHTML: true,
shared: true,
split: false,
followPointer: true,
outside: true,
formatter: myTTFormatter
myTTFormatter gets the points array and I am able to get tooltip as well, but the problem is it appears for only the first series and when I hover over other series it doesn't show up. I put a debugger to custom formatter fn and it goes there as well, but I don't understand why the tooltip is not appearing when I hover over other series in my chart.
Note: I have linked all other xAxis to the first XAxis to make the zoom work for all the data series.
HighCharts version: 9.1.2
Thanks for sharing a part of your code. I minimalized your code and it looks like a regression. This issue is already reported on the Highcharts Github issue channel and seems that is in process of working on that: https://github.com/highcharts/highcharts/issues/16004
Mnimalized demo: https://jsfiddle.net/BlackLabel/8jke1yvc/
If you don't need any of the new features use the previous version of the Highcharts: https://jsfiddle.net/BlackLabel/8osj6ch9/
<script src="https://code.highcharts.com/stock/8/highstock.js"></script>

Highchart - give to series-marker other zIndex then to the series-lines

I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load

Append to default highcharts tooltip

I have a line graph with the y-axis set to category and x-axis to values. On hovering over a point , i get the default tooltip information like in
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-mouseover/ when
tooltip: {
enabled: true
}
My y-axis is set to some label like "Seconds" or "FPS". I want to be able to just add the y-axis label text to the default tooltip without changing any formatting options in the default tootlip, so for example if you hover over the first point it should display 29.9 Seconds along with the other data keeping other contents unaltered.
I know you can use a formatter and override it but I would like to retain the original tooltip display which shows up when you dont override the formatter.
Add valueSuffix, Change your tooltip to this: Read Here
tooltip: {
enabled: true,
valueSuffix: ' Seconds',
}
DEMO

series is truncated after click on the series in the legend

If I am setting the rangeSelector to All, and clicking on a series in the legend. It seems like some series data gets lost or wont be displayed.
I cant figure out the problem, am I displaying too much data? I guess there wont be a problem with the json data structure (I am using the same structur as in all the demos (on the highcharts website)) - mostly it is a 2dim/3dim array.
I will attatch some screenshots of the given problem:
seems like a general highstock problem: http://jsfiddle.net/ZqqsE/1/ just added to the given demo from the highstock demos (http://www.highcharts.com/stock/demo/compare) a legend and if you select "All" and hide one of the 3 series, the other series are truncated.
legend: {
align: "right",
layout: "vertical",
enabled: true,
verticalAlign: "middle"
},
http://jsfiddle.net/eKQcK/1/
I am pretty sorry, but i cant provide example data, because my datasets are quite big - as I said - I am using the same datastructure like the examples on highcharts.com.
[[[series1 timestamp, series1 value],[series1 timestamp, series1 value],[iteminformation]],[[series2 timestamp, series2 value],[iteminformation]],[[series3 timestamp, series3 value], [series3 timestamp, series3 value],[iteminformation]]]
as you can see in my jsfiddle code, I am using an array called informationarray, which provides information about the series as an array element.
e.g.
[seriesname, series max value, series min value]
I just added this element at the end of every series array

Prevent xAxis of column highchart taking negative labels on hiding one of other series(on legendItemClick event)

On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]

Resources