I am having this code: https://jsfiddle.net/delux123/dk9zbsc1/5/ where I successfully can change the label's related colors and the font.
What I am missing is, I want to be able to update the text of the label itself.
I tried this with the code:
// Update the label
thischart.currentAnnotation.update({
labels: [{
text: fontText, //this line is not working
backgroundColor: fontBackgroundColor,
style: {
fontSize: fontSzie,
color: fontColor
}
}]
});
And also I tried with the code:
thischart.currentAnnotation.labels[0].update({
text: fontText
});
And a few more combinations which I found in similar threads (including the attr property), but none of them were working.
So I wonder, how can I update the text dynamically?
The problem results from the fact that you have used format property in the label creation process and update text property. Text is overwritten by format.
var onclick = function() {
_self.chart.addAnnotation(Highcharts.merge({
langKey: 'label',
labelOptions: {
// format: labelTextForm.querySelector('#labelTextInput').value,
shape: 'rect'
},
labels: [{
text: labelTextForm.querySelector('#labelTextInput').value,
...
}]
}, ...));
};
Live demo: https://jsfiddle.net/BlackLabel/pghrfjsx/
API Reference: https://api.highcharts.com/highcharts/annotations.labelOptions.format
Related
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'd like to update the red dashed line on this highchart plot using the text box and button below it. I'm stuck on how to get it to work. Right now I'm just trying to get the button press to move the line up slightly just so I can see if it's working.
http://jsfiddle.net/tZ8GM/
This is the function I'm trying to use to update it.
$("#setPtButton").click(function() {
Highcharts.setOptions({
yAxis: {
plotLines: [{
value : 68.1,
color : 'red',
dashStyle : 'longdash',
width : 2
}]
}
});
});
You should be using a combination of addPlotLine and removePlotLine.
$("#setPtButton").click(function() {
var chart = Highcharts.charts[0];
chart.yAxis[0].removePlotLine('setline');
chart.yAxis[0].addPlotLine({
value: $('#setPoint').val(),
color: 'red',
width: 2,
id: 'setline',
dashStyle : 'longdash'
});
});
Updated fiddle.
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 need to change the font color of the axis title after it has been created. I have tried all variations on the commands below but can't get anything to work.
Chart.yAxis[0].setOptions({ yAxis: { title: { styles: { color: '#FFFFFF' } } } });
Chart.yAxis[0].axisTitle.attr({ styles:{ color:"#FFFFFF" } });
Again, I can do this upon creation of the plot, I just need to find the option command or style command to update this dynamically.
Thanks
You can use update() function.
http://jsfiddle.net/sbochan/xm2QA/
chart.yAxis[0].update({
title:{
style:{
color:'red'
}
}
});
http://api.highcharts.com/highcharts#Axis.update()
plotLines: [{
value: 1.2873,
color: 'green',
label: {
style: {
color:'red'
background-color:'#000',
background-image:'url(image.jpg)',
},
}
}],
Is this how it should be? Also, is it possible to style a value of plotLine with an image (for example, a gif) from an external file?
Unfortunately background images are not supported, but you can request your proposition here: http://highcharts.uservoice.com