I am having this jsfiddle example, where I need to hide the tooltip that shows on the xAxis. I want to keep the one that shows in the middle.
Here is some part of the related settings:
series: [{
name: 'AAPL Stock Price',
data: data.slice(80, 110),
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
}],
yAxis: {
labels: {
align: 'right',
x: 0,
y: -5
},
opposite: false,
},
This is the one I want to remove:
Setting tooltip.split as a false should fix the issue.
Demo: https://jsfiddle.net/BlackLabel/Le8w0r63/
API: https://api.highcharts.com/highstock/tooltip.split
I want to show Custom tooltip over the circle(point not on the line for Highchart dumbell chart )
[enter image description here][1]
[1]: https://i.stack.imgur.com/qJeG7.png
Here in image we can see tooltip is sowing for line but we want for custom point that we have created(Red)
You can add a dummy series that will render this point and define a tooltip format by using the tooltip.pointFormatter callback.
series: [{
data: data
}, {
type: 'line',
data: [{
x: 1,
y: 74
}],
color: 'red',
marker: {
symbol: 'circle'
},
showInLegend: false,
tooltip: {
pointFormatter() {
return 'custom tooltip'
}
}
}]
Demo: https://jsfiddle.net/BlackLabel/fmq8tL0n/
API: https://api.highcharts.com/highcharts/series.line.tooltip.pointFormatter
I'm using Highchart to generate a line chart with data labels. Here is an example of what I'm doing:
Highcharts.chart('container', {
title: {
text: 'Chart without categories'
},
xAxis: {
categories: ['a','b'],
},
series: [{
data: [1,2]
}]
});
This code generates the following chart: As you can see, there is a space between the line and and the borders of the chart.
Without using categories, there is no space:
What can I do to remove this spaces?
That is a default behavior of category axis type. Please check this example: http://jsfiddle.net/BlackLabel/wuqxb2cy/ with a more visible distribution into categories.
As a solution you can set xAxis.tickmarkPlacement and series.pointPlacement to 'on':
xAxis: {
categories: [...],
tickmarkPlacement: 'on'
},
series: [{
data: [...],
pointPlacement: 'on'
}]
Live demo: http://jsfiddle.net/BlackLabel/qkezc3mx/
API Refefence:
https://api.highcharts.com/highcharts/xAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/series.line.pointPlacement
Unable to render legend in word cloud in highcharts
Refer the jsfiddle link : http://jsfiddle.net/znm6f89r/115/
series: [{
type: 'wordcloud',
data: profit,
name: 'Profit',
color:'blue'
}],
legend: {
enabled: "true"
}
Is there any way to achieve this?
I'm trying to tweak a Highcharts scatter plot with this date series
series: [{
data: [[1,2],[2,5]]
}]
so that i can put a name on each point, I want to show the name in the tooltip.
The API doc says an object of named values can be defined like this
series: [{
data: [{
name: 'Point 1',
x: 1,
y: 2
}, {
name: 'Point 2',
x: 2,
y: 5
}]
}]
but it seems the x and y values are not picked up. See my jsfiddle example.
This answer works for Highcharts 4.1.9.
Took me a long time to figure out hence I want to pass it on in case someone is looking for this as well.
Your mileage may vary for other versions.
plotOptions: {
scatter: {
dataLabels: {
format: "{point.name}",
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Projects',
data: [{"name":"Point 1", "x":1,"y":2}, {"name":"Point 2", "x":4,"y":5}]
}]
What are the key points?
Ensure that the scatter.dataLabels is enabled and the format is {point.name}
Ensure that the data is in the format of {"name":"Point 1", "x":1,"y":2}
As mentioned in this comment, what works for me in Highcharts 5.0.6 is:
{
type: 'scatter',
tooltip: { headerFormat: '<strong>{point.key}</strong><br>' },
data: [{ x: 0, y: 1, name: 'Whatever' }, ...]
}
As stated in the documentation, the name field is the name of the point as shown in the legend, tooltip, dataLabel, and so on. I updated your fiddle to include the highcharts library, and I am seeing this behaviour (i.e. if I hover over a point, its label is displayed).
If you want the x-axis labels set correctly, you need to ensure that the xAxis section of your chart configuration does not have a categories key.
You could also show names in the legend section. Updated the selected answer above here
series: [{
name: 'Point 1',
data: [[3, 3]]
}, {
name: 'Point 2',
data: [[4, 8]]
}, {
name: 'Point 3',
data: [[9, 15]]
}]
This is a new feature in HighCharts 3.0. You have to define the xAxis type to 'Category' and give the name of the point in the data if you want it to appear on the xAxis:
xAxis: {
//categories: ['Green', 'Pink'],
type: 'category'
},
...
data: [{
name: 'Green',
x: 1,
y: 2
}, {
name: 'Pink',
x: 2,
y: 5
}]
See your jsFiddle code updated :here.
Note that I have added the tooltip formating feature to show that point.x has no more meaning in this context, only point.name remains relevant. Also, you cannot have two points with different 'name' at the same x position.
I struggled with this issue and after finding the solution in the documentation I must say the behavior as designed feels a bit unexpected.
Per the docs (here: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip), the tooltip does not show all fields you can add to a data point, but rather
Defaults to x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>.
To show the data point name (and any other fields you want to), simply change the HTML rendered by the tooltip. For example, you can display the point name and coordinates in the tooltip while removing the series name as follows:
chart: {
type: "scatter",
}
tooltip: {
headerFormat: '',
pointFormat: 'Name: <b>{point.name}</b><br/>Load time: <b>{point.y}</b><br/>Requests: <b>{point.x}</b>',
},