I have a highstock chart. Is it possible to render a slider inside the chart area? There's only simple elements eg text, box etc are given in documentation.
You can use annotations to add some scrollable HTML element:
annotations: [{
labelOptions: {
...,
useHTML: true,
shape: 'rect',
formatter: function() {
return '<div class="annotationContainer"><div>Some text</div></div>'
},
y: 15
}
}]
Live demo: http://jsfiddle.net/BlackLabel/sfLum9ep/
API Reference: https://api.highcharts.com/highstock/annotations.labelOptions.useHTML
Related
I am trying to do center align the title text of the pie chart Highchart. Was able to achieve that but on mouse hover, and mouse out the title data doesn't get updated. Anyone can help me with the same.
On MouseHOver trying to do the below mentioned code
point: {
events: {
mouseOver: function() {
let span = '<span style="color:${this.color}" class="dealer-title">${this.y}<br/> <span style="color:#33383e;}" class="text-truncate" title="${this.name}"><b> </b></span></span>';
$('.customTitle')[0].innerHTML = span
}
}
}
}
},
fiddle attached:
https://jsfiddle.net/5sutmqv3/1/
You need to enable useHTML argument in the text method call:
chart: {
type: 'pie',
events: {
load: function() {
...
var text = rend.text("textTexttext", left, top, true).attr({
'text-anchor': 'middle',
align: 'center',
'zIndex': 10
}).addClass('customTitle').add();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/w5a2jpk7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
It looks like you can't include html tags in the title. If you remove the SPANs it'll display the values.
$('.customTitle')[0].innerHTML = this.y
so by reading the documents by default when you enable dataLabels on the chart it will render yAxis values, but is it possible to make it render xAxis values?
You can format labels in Highcharts in two ways:
Use dataLabels.formatter where you have access to this (point):
formatter: function () {
return this.x;
}
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/1/
Use dataLabels.format, where you can put simple template:
format: "{x}"
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/
Note:
You can use any property from a point, to show this in a label, both format and formatter can be used:
format: '{point.customValue}'
Or:
formatter: function () {
return this.point.customValue;
}
Where a point is defined as an object:
series: [{
data: [{
x: 10,
y: 15,
customValue: '10x10'
}]
}]
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/3/
Yes it's possible just add this code :
dataLabels: {
enabled: true,
formatter: function() {
return this.x;
}
},
Fiddle
I have a chart drawn using Highcharts API, which has two series and multiple levels of data shown using DrillDown feature of the API. When i tend to modify the default Axis label format using formatting property and by setting useHTML 'true', the labels are displayed with underline even in the last level which is not the expected behaviour.
xAxis: {
type: 'category',
labels: {
rotation: -45,
formatter: function (e) {
return '<div class="chartXAxisLabel" title="' + this.value + '" ><span>' + this.value + '</span></div>';
},
useHTML: true
},
title: {
enabled: true,
align: 'high'
}
},
The issue could be seen in the below fiddle link.
http://jsfiddle.net/6LXVQ/418/
I find it odd that only adding/removing useHTML: true causes this problem by itself. The formatter does not need to be involved (as shown in this minimal example).
I found that adding this minimal code fixes the problem (JSFiddle example with your code):
xAxis: {
labels: {
useHTML: true,
style: {
"text-decoration": "none"
}
}
}
I'm not exactly sure why, but it removes the underline from the span element that is causing it.
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.
We have an application to draw some bioinformatics images. HighCharts.js is a very good plotter. I know that we may define the tooltip by the API:
tooltip: {
useHTML: true,
formatter: function() {
return 'here the html code';
}
},
But how to add a tooltip for the customized parts? Say add a tooltip for labels here
It seems that the title field is used as a tooltip (no need for jquery-ui) :
renderer.circle(200, 150, 100).attr({
fill: '#FCFFC5',
stroke: 'black',
title:'Hello\nI am a \nmultiline tooltip',
'stroke-width': 1
}).add();
In action :
http://jsfiddle.net/Snarkturne/NYZNT/
You can't use the default tooltip of Highchart on custom objects. renderer.text, renderer.label, etc... because they return SVGObject.
The solution is to create your own tooltip. I would suggest you to use a predefined tooltip library like twitter boostrap :
// your tooltip created with bootstrap
$(".yourlabel").tooltip({
// ^^^^^^^^^^
'container': '#container',
'placement': 'top',
'title': 'Mytooltip'
});
// with
ren.label('Rasterized image', 100, 215)
.attr({
'class': 'yourlabel'
// ^^^^^^^^^
})
.css({
color: colors[1],
fontSize: '10px'
})
.add();
You can see that we link the tooltip with your custom object thanks to the class attribute. If you choose to use the twitter bootstrap tooltips, don't forget to use the container attribute. It will not work without it...
Here is a live example : http://jsfiddle.net/rttav/
And this is the documentation for twitter boostrap tooltips : http://twitter.github.io/bootstrap/javascript.html#tooltips
There is no built-in option for custom elements tooltip, however you can add your own tooltip to each element. Just use on() function, something like that:
ren.path(...).attr(...).add().on('mouseOver', function () { alert ('mouseOver!'); }).on('moueOut', function () { alert('mouseOut'); });