I would like implemented names of town (Trencin, Nemsova, Ilava... ) and their tooltips together. Click on green TN block in map and check it.
I try some solutions, but:
tooltip overllaps names of towns:
useHTML: true,
http://jsfiddle.net/jezrael/grzwuL9g/5/ (line 47)
three names of towns are missing:
useHTML: false //(default),
http://jsfiddle.net/jezrael/grzwuL9g/4/ (line 47)
give tooltip out of map, but impossible:
positioner: function () {
return { x: 0, y: 250 };
},
http://jsfiddle.net/LyUxF/
http://jsfiddle.net/j92p2/ in chart
http://jsfiddle.net/jezrael/grzwuL9g/5/ (line 55)
giving name of town with connectors out of map:
http://www.highcharts.com/maps/demo/us-data-labels
http://jsfiddle.net/highcharts/9Fk3a/5/
I cant do it.
Solution is:
Highcharts.seriesTypes.map.prototype.hideOverlappingDataLabels = function() {};
jsfiddle
Related
I created a calendar using a heatmap, like this:
calendar screen:
The axis types are categories, so the months are placed as blocks with the respective offset in the matrix. Every month is defined as a series with names.
Now my problem is, I want to show the month name above the block. However, I found no way to display the serial name. He is simply ignored.
The x-axis displays only the index of the category. I can not use this. The data label contains the color value for the heatmap.
My workaround currently is that I insert the month names as PlotLine. But that's not the way to go. Especially since the positioning is independent of the monthly block and thus error-prone.
series: [{
name: 'January',
keys: ['x', 'y', 'value'],
data: [...]
}, ...next month...]
jsFiddle example
You can use Highcharts.SVGRenderer to add series name as text in calculated position:
events: {
load: function() {
var series = this.series,
bbox;
series.forEach(function(s) {
bbox = s.group.getBBox(true);
this.renderer.text(
s.name,
bbox.x + this.plotLeft + bbox.width/2,
bbox.y + this.plotTop - 10
)
.attr({
align: 'center'
})
.css({
color: 'black',
fontSize: '12px'
})
.add();
}, this);
}
}
Live demo: https://jsfiddle.net/BlackLabel/zypnwq50/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
I have a highstock chart with a scatter series that has overlapping points. The X values are identical but the Y values have slight variations. Because the variations are small the overlap is not exact but is still difficult for the user to distinguish.
When a scatter point is clicked / tapped I want to identify all data points that the mouse pointer / finger touches. However it seems like Highcharts will only raise a click event for the point on top of the stack. There are several suggestions online for iterating over all data points and finding those with matching Y values, however in my case I would need to apply some fuzzy logic and try and select points that look to the user like they're overlapping, based on the size of the marker and the height of the chart and this seems like a move in the wrong direction.
Is there anything within Highcharts I can use to find all the points the user interacted with?
JS Fiddle: http://jsfiddle.net/f22tq4t2/1/
Highcharts.stockChart('container', {
series: [{
type: 'scatter',
name: 'Demo scatter overlap',
data: [{x: 1500052112000, y: 5}, {x: 1500052112000, y: 5.1}, {x: 1500052118000, y: 15.1}, {x: 1500052118000, y: 15.2}]
}],
xAxis: {
min: 1500052109000,
max: 1500052119000,
type: "datetime"
},
plotOptions: {
series: {
point: {
events: {
click: (event) => {
alert('clicked ' + event.point.y);
}
}
}
}
}
});
I found a plugin that is able to show current price line on highstock candlestick chart, but it only displays the latest data.
I have tried to find a way to display the horizontal price line when user hovers over the data.
I thought it might be related to tooltip event, but I have no idea how to do it.
Could someone give me a hint? Thanks,
tooltop:{
formatter: function () {
}
},
http://jsfiddle.net/RolandBanguiran/nf7ne/
There is a couple of ways to achieve that. Problem is a little missing description (do you want to display current price on hover, or actually hovered value?).
Anyway, the easiest way would be to enable crosshairs: demo.
Another way is to add/remove plotLine on mouseOver event for series.point, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.y
});
}
}
}
If you want to hide that line, use mouseOut event and simply remove plotLine like above.
Third option bases on the above one - in case you want to display current price instead of hovered one. In such case, change value for the plotLine, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.series.yData[this.series.yData.length - 1][0]
});
},
mouseOut: function() {
this.series.yAxis.removePlotLine("tooltip-line");
}
}
}
Extra tip:
Check out more option for plotLines in the API (like dash style, or label).
I'm eager to find out if its possible to place last value in series to yAxis in highcharts.
It supposed to be simple label with last point value shown on the right side of the charts, dinamically chanhing when we add points to the chart.
thanks!
There are probably several methods.
One that I would use can be seen in this example:
http://jsfiddle.net/jlbriggs/zXLZA/
data: [7,12,16,32,{y:64,dataLabels:{enabled:true}}]
This makes use of the datalabels, which are enabled only for the last data point.
The downside to this is that you need to specify that in your data. Not hard to do, but may not fit your needs.
Another way would be to use a second y axis, and the tickPositions property:
http://jsfiddle.net/jlbriggs/zXLZA/4/
Another possible solution is to use tickPositioner with second yAxis. In such case with dynamic data, everything will be computed itself, see: http://jsfiddle.net/3c4tU/
tickPositioner: function(min,max){
var data = this.chart.yAxis[0].series[0].processedYData;
//last point
return [data[data.length-1]];
}
to get the highest value in any axis and series, use the function getExtreme(). It will find you the extreme value (highest or lowest depending of the argument you put behind). Select the chart, the axis and the series before.
here's an example: (whith your chart associated to the variable 'yourChart')
var highestValue = yourChart.yAxis[0].getExtremes().dataMax;
It will return the highest value of the first Y-axis' associated series.
While this below will return the lowest of the second X-axis' associated series:
var lowestValue = yourChart.xAxis[1].getExtremes().dataMin;
My recommended solution:
plotOptions: {
areaspline: {
fillOpacity: 0.2,
dataLabels: {
enabled: true,
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
formatter: function() {
if (this.x == this.series.data[this.series.data.length-1].x) {
return this.series.name + ': '+this.y;
} else {
return null;
}
}
}
}
}
we can make use of formatter for this
here is an example to display the last value
http://jsfiddle.net/kgNy4/1/
here is an example to display maximum value
http://jsfiddle.net/kgNy4/
In the example I have put
dataLabels: {
enabled: true
}
so that formatter function will be executed
I hope this will be useful for you
My question is similar to the one in
Highcharts: Show special marker on column chart
I have a column chart, which is a histogram of mutual fund returns in a specific period.I want to highlight where the Mutual Fund of interest falls with a special marker.
Say for example, i have -50 to -25, -25 to 0, 0 to 10, 10 to 20, 20 to 30, and 30 to 50 on my x axis, and corresponding Y values. I want to highlight with a marker on '20 to 30' to show that the Mutual Fund of interest falls into that bucket. I know we can do this using spline chart like http://www.highcharts.com/demo/spline-symbols.
Is there a way to do the same for column charts ??
In general you can't add custom marker to the column chart, but you can add similar behavior. I've created simple example with custom marker for scatter series, useful if you want to add more series into legends: http://jsbin.com/oyudan/37/edit (if not, just set showInLegend: false)
Highcharts.updateMarketMarkers = function (chart) {
/* get category width */
var catWidth = chart.xAxis[0].width / chart.xAxis[0].categories.length;
/* get padding of each column (two sides) */
var catPadding = chart.series[0].options.pointPadding * catWidth;
/* actual value - padding - symbol width/2 */
chart.series[2].markerGroup.translate(chart.series[2].markerGroup.translateX - 2 * catPadding - chart.series[2].data[0].shapeArgs.r / 2);
};
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
showAxes: false,
events: {
load: function () {
Highcharts.updateMarketMarkers(this);
},
redraw: function () {
Highcharts.updateMarketMarkers(this);
}
}
},
...
Another solution is to use Highcharts renderer to draw custom shapes at specific place. Here you can find more about renderer: http://api.highcharts.com/highcharts#Renderer