As you can see on this JSFiddle, I want to show "%" to values in the dataTable below the graph : http://jsfiddle.net/fa32gywh/
I tried every options in my options :
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y} %'
}
}
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
format: '{value}%'
}
},
It works for my graph, but not the data in the dataTable.
You can style the table with css. Note that my selector works because you only have one series If you had multiple, you would have to be more specific.
.highcharts-data-table td.number:after {
content: '%'
}
http://jsfiddle.net/fa32gywh/1/
Related
I am using HighChart library to show Pie Chart on my page, I am keeping showTable always true to show every time.
The problem is whenever data binds to charts using JQuery Ajax post dynamically, i see proper data in chart but also it keeps adding new data table everytime at the bottom. E.g. First time there will be only one table, after another call there will be two tables added and so on. Why Hightcharts not updating the same table again or is there a way to kill any existing table.?
hc = Highcharts.chart(chartName, {
chart: {
type: 'pie',
options3d: {
enabled: false,
alpha: 45
},
style: {
color: '#575962'
}
},
title: {
text: title,
style: {
color: '#575962',
fontweight: '400'
}
},
subtitle: {
text: 'Current Month(Top 10)'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: false
},
exporting: {
showTable: true
},
series: [{
name: 'Price',
data: [],
dataLabels: {
formatter: function () {
//const point = this.point;
//return '<span style="color: #575962;font-size:11px;font-weight: 400">' +
// point.name + ': $' + point.y + '</span>';
}
}
}]
});
Why Hightcharts not updating the same table again or is there a way to kill any existing table.?
I have achieved this by removing the series on each call and adding them again with new data. Hope this helps if anyone else looking and couldn't find any other answer.
//Removing Series
while (hc.series.length > 0) {
hc.series[0].remove(false);
}
//Adding new Series
hc.addSeries({
name: 'Price',
data: [],
dataLabels: {
formatter: function () {
const point = this.point;
return '<span style="color: #575962;font-size:11px;font-weight: 400">' +
point.name + ': $' + point.y + '</span>';
}
}
});
//Binding Series data
var res = result.Data.slice(0, 10);
res.forEach(function (element, index) {
hc.series[0].addPoint({
name: element.ResourceGroupName,
y: element.TotalMonthlyPrice,
});
});
here's the demo : online demo
the datalabel is too long to display , i want it just inside the bubble and the overflowed text displayed as "ACDE..."
I can suggest two solutions for this case.
set the overflow to ellipsis and set some width for the dataLabel:
Demo: https://jsfiddle.net/BlackLabel/ye5s7m6g/1/
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: "{point.name}",
style: {
textOverflow: 'ellipsis',
width: 45
}
}
}
},
API: https://api.highcharts.com/highcharts/series.bubble.dataLabels.style
enable textPath feature in the dataLabels:
Demo: https://jsfiddle.net/BlackLabel/0srgnvxd/1/
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: "{point.name}",
textPath: {
enabled: true
}
}
}
},
API: https://api.highcharts.com/highcharts/series.bubble.dataLabels.textPath.enabled
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 using some PHP loops generate a series of charts for individuals.I'm trying to place the X-Axis category point on top of my column for each point. The relavent code is:
xAxis: {
categories: [<?php echo implode(',', $year); ?>],
title: {
text: 'Year'
}
},
yAxis: [{
min: 0,
title: {
text: 'ADR'
},
stackLabels: {
enabled: true,
formatter: function() {
return '<b>' + this.x.category + '</b>';
},
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
I'm unsure how to go about this i've tried this.x, this.x.category, this.x.value and so far I've not been able to get my x-axis category value. How do I do this in Highcharts?
The stack is a separate entity from the series or the point, so doesn't have direct access to the same properties.
But with a little digging, you can make the link from the stack to the x axis categories (I always just do a console.log(this) within the formatter to see what it can access...)
formatter: function() {
var x = this.x;
var cat = this.axis.chart.xAxis[0].categories[x];
return cat;
}
Example:
http://jsfiddle.net/jlbriggs/xgucespk/
You could also just define your categories array outside of the chart, and reference that array for both the categories definition, and in the formatter function.
Example:
http://jsfiddle.net/jlbriggs/xgucespk/1/
I am new to highchart and am using it to render bar chart on my webpage. But the chart is not getting displayed while printing. Only the X and Y axis is printing with values but not the bars on it.
I am using IE8. The bar chart is visible(on print) in IE8 mode but its not visible in IE8 Compatible mode. I need to make it work on IE default mode i.e. IE8 compat. mode.
Can anyone help me in this issue.
I am adding a code chunk of my js function where I am printing my highchart in a lightbox window.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'containerDivID',
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: xDataValues
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' kr';
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: 1,
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
}
,
yAxis: {
labels: {
formatter: function() {
return this.value;
}
},
title:{
text: ''
}
},
series: [
{
name: 'YAxis',
color: '#37789F',
data: yDataValues
}
],
credits:{
enabled: false
}
});
In this lightbox I have a print button on pressing this button I am calling window.print() to print the page. On my print page I can see the y and x axis and there data but cannot see my bar charts. But If I change IE8 mode from Compatible to IE8 standard mode then I can see my chart on printing.
Regards,
Andi
For me I didn't use the print() function to print the chart as I need to print extra data with the chart; As my chart is part of a report.
kindly find the custom print function I wrote:
function printReport() {
w = window.open();
var svg = myChart.getSVG();
//clone the div you want to print which contains your chart
var toprint = $('#bs-results') .clone();
//replace the chart with the svg
toprint.find('#graph_div').html(svg);
//right the output to print it
w.document.write(toprint.html());
w.print();
w.close();
}
Please take look at compatibility page http://www.highcharts.com/documentation/compatibility, we support native browser but not compatibility mode.