I cannot seem to get the tooltip value label to change using the tooltip: { pointFormat: "custom label"} option.
I'm integrating Highcharts in the chartkick gem, and I've ensured that chartkick is indeed using the highcharts adapter. The other library options work such as xAxis and yAxis.
Here is the code in question:
column_chart #registrations.joins(:clinic).group("clinics.name").count,
title: "Registrations Per Clinic",
library: {
tooltip: {
pointFormat: "Registrations: <b>{point.y}</b>"
},
xAxis: {
title: { text: "Clinic" }
},
yAxis: {
allowDecimals: false,
title: { text: "Number of Registrations" }
}
}
No matter what the tooltip renders with the word Value
You can try tooltip.formatter : Documentation
Related
As you can see on this JSFiddle, I want to show "%" to values in the dataTable below the graph : http://jsfiddle.net/fa32gywh/
I tried every options in my options :
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y} %'
}
}
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
format: '{value}%'
}
},
It works for my graph, but not the data in the dataTable.
You can style the table with css. Note that my selector works because you only have one series If you had multiple, you would have to be more specific.
.highcharts-data-table td.number:after {
content: '%'
}
http://jsfiddle.net/fa32gywh/1/
How to display highlighted graph's x-axis values only , on bar graph in
high chart?I have 6 graphs plotted, need to highlight selected graphs x-axis values only.
xAxis: {
categories: userArr,
title: {
text: 'Users'
},
},
You may do so by using formatter function in datalabel (See Fiddle here)
dataLabels: {
formatter: function(){
return this.point.name
},
enabled: true
}
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 want to make some tooltips visible in my d3 map. The tooltips are column charts generated by Highcharts regarding the chosen city. The trick is that everything is displaying correctly (axis, labels ...) except that the columns are not visible!
Here my d3 code (only the relevant parts):
var tooltip = d3.select("body")
.append("div")
.attr("id","tooltip")
.style("position", "absolute")
.style("visibility", "hidden");
cities.on("mouseover", function(d, i) {
d3.select(this).style('fill', '#95a5a6');
tooltip.html(zoomCityComm(d))
return tooltip.style("visibility", "visible")})
.on("mousemove", function(d, i){
return tooltip.style("top", (d3.event.pageY - 130) + "px").style("left",(d3.event.pageX - 120) + "px");
})
}
The function zoomCityComm is HighCharts (example of data: [5,10]):
function zoomCityComm(d) {
chart = new Highcharts.Chart({
chart : {
renderTo: 'tooltip',
type: 'column',
width:200,
height:200,
plotBackgroundColor: '#FCFFC5',
zoomType: 'xy'
},
title: {
text: "TOTO"
},
legend: {
enabled: false
},
xAxis: {
categories: ['In','Out']
},
yAxis: {
title: {
text: 'Sum',
style: {
color: '#4572A7'
}
},
labels: {
style: {
color: '#4572A7'
}
},
},
series:[{color: '#4572A7',data: res}]
});
return document.getElementById("tooltip").innerHTML;
}
When the graph is displayed in a "normal" div within the document, it appears correctly.
Sorry if my explanations are not clear but ask me for some details if needed.
Thanks
Cyril
You're setting the HTML content of the div twice, as highcharts renders it itself. In your mouseover handler function, it is enough to do
zoomCityComm(d);
instead of
tooltip.html(zoomCityComm(d));
For the interested, here's what's happening. Setting the HTML of the tooltip div from the return value of the function captures the first animation frame that highchart uses to grow the bars. As it is the first frame, the height of the bars is still 0 -- that is, the bars are there, but not visible because they have essentially no height. Replacing the HTML of the div means that the animation won't work anymore, as the elements that would be animated have been replaced.
I am new to highchart and am using it to render bar chart on my webpage. But the chart is not getting displayed while printing. Only the X and Y axis is printing with values but not the bars on it.
I am using IE8. The bar chart is visible(on print) in IE8 mode but its not visible in IE8 Compatible mode. I need to make it work on IE default mode i.e. IE8 compat. mode.
Can anyone help me in this issue.
I am adding a code chunk of my js function where I am printing my highchart in a lightbox window.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'containerDivID',
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: xDataValues
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' kr';
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: 1,
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
}
,
yAxis: {
labels: {
formatter: function() {
return this.value;
}
},
title:{
text: ''
}
},
series: [
{
name: 'YAxis',
color: '#37789F',
data: yDataValues
}
],
credits:{
enabled: false
}
});
In this lightbox I have a print button on pressing this button I am calling window.print() to print the page. On my print page I can see the y and x axis and there data but cannot see my bar charts. But If I change IE8 mode from Compatible to IE8 standard mode then I can see my chart on printing.
Regards,
Andi
For me I didn't use the print() function to print the chart as I need to print extra data with the chart; As my chart is part of a report.
kindly find the custom print function I wrote:
function printReport() {
w = window.open();
var svg = myChart.getSVG();
//clone the div you want to print which contains your chart
var toprint = $('#bs-results') .clone();
//replace the chart with the svg
toprint.find('#graph_div').html(svg);
//right the output to print it
w.document.write(toprint.html());
w.print();
w.close();
}
Please take look at compatibility page http://www.highcharts.com/documentation/compatibility, we support native browser but not compatibility mode.