I notice that:
title: {
text: title,
}
Can customise the content of the title but what if I need a chart without title? What should I do? I try to remove those code above and I got a "Chart Title" instead of just having nothing - which is what I expected.
Thanks,
title: {
text: ''
}
or
title: {
text: null
}
Related
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
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
I'm configuring my chart in highcharts and everything works fine but the noData position.
This is my options:
optionsChart = {
chart: {
type: 'bar'
},
lang: {
noData: 'No data available'
},
noData: {
position: {
align: 'end'
}
}
}
the text is setted but it's not aligned, how can I solve it?
It work with left, center or right
noData:{
position:{
align:'right'
}
},
Fiddle
I want to use HTML in high chart titles. Something like:
{
"title": "An <b>Important</b> Chart"
}
Is there any simple way to do that?
You need to use useHtml: true like that :
...
title: {
text: 'An <b>Important</b> Chart',
useHtml: true
},
...
Documentation - Fiddle
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()