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()
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
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've using Highcharts 2.3.5. In the "exporting' object, under "chartOptions", I'm able to change some things when exporting, like the background color of the chart, but I haven't been able to enable the dataLabels nor change the marker size.
Here's an example, of what works and doesn't work. In this case, when exporting, I want to change the background color (which works) and make sure the data labels appear (which doesn't work) :
...
exporting : {
chartOptions : {
chart: { backgroundColor: '#ff0000'}, //this works
plotOptions: {
pie : {
dataLabels: {enabled: true} //this one doesn't work
}
}
}...
Am I missing something obvious?
j
$('#container1').highcharts({
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
scale: 3,
fallbackToExportServer: false
},
I have two series that should we plotted on the same graph, as is shown in the example,
how can I 'sync' the axis so that both '0' (origin) lines align?
I cannot use the linkedTo property because then the values are the same as well, while these should be independent. Only the position of the 0-line should be the same.
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}
Something similar is done here, for first button: http://jsfiddle.net/Fusher/5m9JW/
It's not perfect solution, but allows to manage that in afterSetExtremes
You can try to use min value for second (column) yAxis, with negative value.
Is it possible to hide the "highcharts-tracker" (clock) from the png/jpeg exports?
I managed to hide it from the guage chart itself by using $("highChartsGuageId").find('.highcharts-tracker').hide();
Not sure whether this is possible or not.
You can use chartOptions to configure exported chart.
exporting:{
chartOptions:{
plotOptions:{
gauge:{
dial:{
backgroundColor: 'rgba(0,0,0,0)'
},
pivot:{
backgroundColor: 'rgba(0,0,0,0)'
}
}
}
}
},
Example: http://jsfiddle.net/c3eL785x/