When using the tooltip inside the »series« element, it displays a kind of bullet point (and eventually the series name), which I don't want to see:
Is there any way to suppress this? Couldn't find anything. Seems that this doesn't happen when using the tooltip element not within the series element. But then, I don't succeed to access the JSON country name tags.
Here is a fiddle.
Highcharts.mapChart('container', {
series: [{
mapData: Highcharts.maps['customMap'],
joinBy: 'ISO3CD',
keys: ['ISO3CD', 'value'],
data: [
["RUS", 200]
],
tooltip: {
pointFormat: '{point.properties.ROMNAM}: <b>{point.value}</b>'
}
//data: data,
}]
});
Thanks for any hints.
This is the tooltip header which can be hidden like this:
tooltip: {
headerFormat: undefined,
pointFormat: '{point.properties.ROMNAM}: <b>{point.value}</b>'
}
Related
I created a simple column chart with a datetime xAxis and no other options. If I add simple data [342, 351, ...], it draws as expected, with columns that size to fit the space. However, when I use [x,y] data pairs, [[1481863920000,326],[1481863915000,330],...], the columns become overly wide and overlap each other.
jsFiddle showing issue http://jsfiddle.net/7hoes1p9/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with fat columns'
},
xAxis: {
type: 'datetime'
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [[1481863920000,326],[1481863915000,330],[1481863910000,418],[1481863905000,384],[1481863900000,329],[1481863895000,342],[1481863890000,550],[1481863885000,639],[1481863880000,488],[1481863875000,375],[1481863870000,532],[1481863865000,397],[1481863860000,362],[1481863855000,312],[1481863850000,373],[1481863845000,373],[1481863840000,344],[1481863835000,356],[1481863830000,545],[1481863825000,646],[1481863820000,454],[1481863815000,328],[1481863810000,553],[1481863805000,407]]
}]
});
Do I need to override some default behavior to get proper columns? Is there a minimum column width I need to unset? Does the data need to be added differently? Any help would be appreciated.
When you use a datetime axis with series like columns and bars, you should specify pointRange property. It defines what range of time is valid for a single column.
series: [{
pointRange: 1000,
example: http://jsfiddle.net/7hoes1p9/5/
You need to add the .pointwidth to get the optimum width of the columns as demonstrated here in this fiddle
column: {
pointWidth: 1,
}
or for other options refer to this thread here
Check the following in chart options:
plotOptions: {
series: {
pointWidth: 5
}
}
When using Highcharts Navigator the docs mention:
Unless data is explicitly defined on navigator.series, the data is borrowed from the first series in the chart.
$(function () {
$('#container').highcharts('StockChart', {
navigator: {
series: {
lineWidth: 1
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
But as in the example of Highcharts Navigator itself here the data is not exactly the data from the first series in the chart. In this example the date is between 2007-2015 but navigator only shows 2008-2014. Is there a way to override this option? How can I change this?
I have one chart and i want to include hover on area but i found it works only on point only.
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60]],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: true
}],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
http://jsfiddle.net/onhfLqdm/3/
As area is bounded by points so how can i hover area instead of points?
Update On hover on each polygon asker wants to show data coming from json.To do so in a div out of container please view this fiddle
In Tooltip One more option to show some info coming from json ,tooltip can be used.Put your data using some name like "someText" (as in my fiddle )and get it in formatter function of tooltip using
this.options.someText
See this fiddle for data in tooltiip
Old Answer:
plotOptions: {
series: {
events: {
mouseOver: function () {
$("#polygon").html('Moused over Event')
.css('color', 'green');
},
mouseOut: function () {
$("#polygon").html('Moused out Event')
.css('color', 'red');
}
}
}
}
Fiddle link is here
I am trying to change the sliced point colour on pie chart. When it is drilled down, the colour couldn't be changed using the select function on the slice. The colour is always changed back to the colour of its parent slice.
For example, when a green slice is clicked on the parent chart to drill down, whatever slice clicked on the child chart will change to green, even though I tried to change it to yellow in the select event which is set in plotOptions. But unselecting it will change the colour to yellow, by clicking another slice.
It seems like a bug to me.
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. November, 2013.'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
select: function() {
this.update({color: 'yellow'});
}
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: brandsData
}],
drilldown: {
series: drilldownSeries
}
});
Here is the fiddle.
In the current version of the Highcharts (Highcharts Basic v7.2.1) everything is working properly.
I'm a bit late on this one, but this is a known issue of Highcharts. Instead of using the select event, use the selected and unselected events. There is a subtle difference here, as using select will often not fire directly after a click. These two events however are more reliable.
https://api.highcharts.com/highcharts/plotOptions.pie.point.events.select
https://api.highcharts.com/highcharts/plotOptions.pie.point.events.unselect
I have found this jsfiddle very helpful when I started working on paginated highchart columns. On top of this good example, I would like to know how I could change the x-axis labels into each data's corresponding name. (Ex. Along the x-axis, we should find the names of 'Fred G. Aandahl', 'Watkins Moorman Abbitt', 'Amos Abbott', etc. with their corresponding y-values and must change accordingly when the "Next" button is clicked.)
I have tried adding "xAxis" option inside the highcharts portion but still had no luck.
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
formatter: function(){
return this.value;
}
}
},
series: [{
data: []
}]
});
and
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
format: '{value}'
}
},
series: [{
data: []
}]
});
Can someone help me regarding on what I am missing in this example? It will be very much appreciated.
You can set type of xAxis to category and without category array the value in axis will be taken from the point. But you will need to change your setData call to
pie.series[0].setData( data.slice(from, to), true, true, false );
xAxis: {
type: 'category'
},
Example: http://jsfiddle.net/kpxp4/8/
I am able to change the x-axis labels accordingly by adding
pie.xAxis[0].update({
categories: category.slice(from, to)
})
after the setData call, where category is an array of all the x-axis labels that you want to display in correspondence to each y-axis value. Moreover, the
xAxis: {
type: 'category'
}
portion, as suggested by #Kacper Madej, works for the specific data format given originally. However, the pie.xAxis[0].update() could be used on a more general sense given that you know the array of x-axis labels that you want to use (regardless of the data or series format that you have).
Here is the link to the jsfiddle.
Hope this could be of any help, too.