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
Related
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 have the following barchart for which I'm trying to turn the hover tooltip off:
= bar_chart [["", current_admin.company.progress_to_target_this_month]], colors: [current_admin.company.progress_bar_colour]
From their homepage, I can make an initializer file which I've done:
config/initializers/chartkick.rb
Chartkick.options = {
height: '300px',
colors: ['#b00', '#666'],
discrete: true,
library: {
pointSize: 0,
vAxis: {
points: false,
legend: false,
discrete: true
},
hAxis: {
points: false,
legend: false,
discrete: true,
textPosition: 'none'
},
tooltips: {
enabled: false
}
},
options: {
tooltips: {
enabled: false
}
},
tooltips: {
enabled: false
}
}
The options regarding vaxis and haxis all work, however I can't get anything to do with tooltips working. I've tried every variety of inserting tooltips: { enabled: false } that I can think of with no joy.
If anyone has any advise it would be greatly appreciated
As of summer 2017 custom tooltips are not supported in chartkick.js. There are two open issues about this on the GitHub repository:
Add support for custom tooltips #86
Piechart with chart.js custom tooltips #85
If you don't need any other pointer-events for the chart, then you can just set pointer-events: none for the div, which contains the chart.
Dears, I am new to Rails development, and now try to use Chartkick to show a pie chart.
I uses Highchart by adding require highchart in application.js. Everything goes well except the data labels. I try to hide them but they are always there.
The original code is like:
new Chartkick.PieChart("changepie", {"WithoutChange":<%=#count_noChange%>,"WithChange":<%=#count_change%>}, {"colors":["#FF9900","#3366CC"]});
As answered in this post, I added
new Chartkick.PieChart("changepie", {"WithoutChange":<%=#count_noChange%>,"WithChange":<%=#count_change%>}, {"colors":["#FF9900","#3366CC"]}, {"library": { "plotOptions": { "pie": { "allowPointSelect": true, "cursor": "pointer", "dataLabels": { "enabled": false}, "showInLegend": true}}}} );
But the data label is still there?
Could you please advise how to specify the options when creating a pie chart to hide data label?
Thanks!
pie_chart data, library: {plotOptions: { pie: { dataLabels: { enabled: false }}}}
I have loaded a csv file into a High Charts column chart: it works. However, I cannot figure out how to customize the chart. All the customizing options refer to hard-coded examples where the 'series' and 'categories' are right there in the code. Whereas mine is coming from a csv. How to use the customizing options? My x-axis is "Days" and y-axis is "Total Gallons"This is my code:
<script>
$.get('mergeHighChartsTotal.csv', function(csv) {
$('#map2').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'Water Usage - September'
},
yAxis: {
title: {
text: 'gallons'
}
}
});
});
</script>
You can prepare a json dynamically, based on CSV. You need to load file and prepare custom parsing or use our data module. More infromation you can find here: http://www.highcharts.com/docs/working-with-data/custom-preprocessing
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.