Related
I am making bar charts using Highcharts and Google spreadsheets. I want to place the datalabels inside the bars, but sometimes the value is so small that the label won't fit nicely inside the bar, so in these cases, I want to place them outside of the bar. I know this can be done, as shown here: https://jsfiddle.net/o3cujptj/
But when I try to use this method with my chart, that uses Google sheets to get its data, it doesn't work, as chart.series[0].data returns empty. How can I make this work?
My js fiddle : https://jsfiddle.net/jmunger/sLk8nmo6/2/
const chart = Highcharts.chart('container', {
plotOptions: {
bar: {
dataLabels: {
x: -5,
align: 'right',
style: {
textOutline: 0
},
shadow: false,
borderWidth: 0,
inside: true,
enabled: true,
pointFormatter: function() {
return Highcharts.numberFormat(this.point.y, 0);
},
//format: 'n = {point.label}'
}
}
},
chart: {
events: {
load: function() {
const chart = this,
points = chart.series[0].data,
options = {
dataLabels: {
inside: false,
style: {
color: 'black'
}
}
};
points.forEach(function(point) {
if (point.shapeArgs.height < 30) {
point.update(options, false);
}
});
chart.redraw();
}
}
},
data: {
googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
googleSpreadsheetWorksheet: 3,
endColumn: 3,
seriesMapping: [{
color: 2,
label: 3 // Labels are pulled from column 2 and picked up in the dataLabels.format below
}],
complete: function (options) {
//?? anything to do here?
}
},
series: [{
dataLabels: {
inside: true,
enabled: true,
style: {
color: 'white'
}
},
type: 'bar'
}]
});
Option 2: Or upload your JavaScript file
Indentation level:
Brace style:
BEAUTIFY JAVASCRIPT BEAUTIFY JAVASCRIPT IN NEW WINDOW
Beautified JavaScript:
const chart = Highcharts.chart('container', {
plotOptions: {
bar: {
dataLabels: {
x: -5,
align: 'right',
style: {
textOutline: 0
},
shadow: false,
borderWidth: 0,
inside: true,
enabled: true,
pointFormatter: function () {
return Highcharts.numberFormat(this.point.y, 0);
},
//format: 'n = {point.label}'
}
}
},
chart: {
events: {
load: function () {
const chart = this,
points = chart.series[0].data,
options = {
dataLabels: {
inside: false,
style: {
color: 'black'
}
}
};
points.forEach(function (point) {
if (point.shapeArgs.height < 30) {
point.update(options, false);
}
});
chart.redraw();
}
}
},
data: {
googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
googleSpreadsheetWorksheet: 3,
endColumn: 3,
seriesMapping: [{
color: 2,
label: 3 // Labels are pulled from column 2 and picked up in the dataLabels.format below
}],
complete: function (options) {
//?? anything to do here?
}
},
series: [{
dataLabels: {
inside: true,
enabled: true,
style: {
color: 'white'
}
},
type: 'bar'
}]
});
The load event is fired when the chart is finished loading - not data.
You can use redraw or render event, which are called after data is loaded.
let allowChartUpdate = true;
const chart = Highcharts.chart('container', {
chart: {
events: {
render: function() {
const chart = this,
points = chart.series[0].points,
options = {...};
if (points.length && allowChartUpdate) {
allowChartUpdate = false;
points.forEach(function(point) {
if (point.shapeArgs.height < 30) {
point.update(options, false);
}
});
chart.redraw();
}
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/tn98gwmj/
API Reference: https://api.highcharts.com/highcharts/chart.events.render
I want to show tree map with different on different levels by using property 'colorByPoint' true.
Highcharts.chart('container', {
chart: {
marginTop: 50,
events: {
load: function() {
this.bread = {
'': makeNode('', this.series[0].name, this.series[0])
}
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true,
align:'left',
verticalAlign:'Top'
},
borderWidth: 1
},
{
level: 2,
colorByPoint: true,
dataLabels: {
enabled: true,
},
borderWidth: 1
}
],
data: points
}],
credits:false,
plotOptions: {
series: {
dataLabels: {
color: '#fff',
textOutline:0,
style: {
fontWeight: 'bold'
}
},
point: {
events: {
click: function(e) {
const hasChildren = !!this.node.childrenTotal
if (hasChildren) {
const bread = this.series.chart.bread
bread[this.id] = makeNode(this.id, this.name, this.series, bread[this.node.parent])
}
}
}
}
}
},
title: {
text: ''
}
});
Here is my js fiddle. https://jsfiddle.net/irfanbsse/8djawts9/
But I dont want show second level color on first level.Same for second level and so on. how i can do it ? Thanks
Here's a demo that shows how to change color of child nodes on point.click.event:
click: function() {
var points = this.series.points;
this.node.children.forEach(function(child, i) {
var point = points.find(function(point_) {
return child.id === point_.id
});
point.update({
color: color[i % (color.length - 1)]
});
});
Live demo: https://jsfiddle.net/BlackLabel/sgkah0fq/
The next thing to implement is reverting the original colors while clicking on the previous level in navigation (label with callout shape).
I have a highchart, as showed on the appended image.
I am attempting to format the legend of only my last data stacked. In this case, index 1 always.
Any help on how to achieve this?
My main goal, being, on there always showing a value i have in a variable, which will be the max value possible.
createChart: function (id, chartData, maxYValues, chartTitle, chartNames, dataToMax) {
var me = this;
debugger;
me.highChart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: id
},
title: {
text: chartTitle,
fontSize: '8px'
},
xAxis: {
labels: {
overflow: 'justify'
},
categories: chartNames
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
stackLabels: {
enabled: true,
format: maxYValues
},
title: {
enabled: false
}
},
colors: ['#afafaf', '#f89c1c', '#3aaa80'],
credits: {
enabled: false
},
tooltip: {
pointFormat: '<span>{point.name}</span>'
},
plotOptions: {
series: {
colors: ['#3aab80', '#3aab80'],
colorByPoint: true,
borderWidth: 0,
dataLabels: {
enabled: true,
headerFormat: '{point.y + point.name}',
format: '{y} mb',
verticalAlign: 'top',
y: -20
}
},
column: {
stacking: "percent"
},
area: {
dataLabels: {
enabled: false
}
}
},
legend: {
labelFormat: '<b>{point.y} MB</b><br/>',
labelFormatter: function () {
if (me.series.data.index === 1) {
return maxYValues;
}
}
},
series: [{
showInLegend: false,
data: chartData,
color: '#3aab80'
}, {
showInLegend: false,
data: dataToMax,
legend: {
labelFormat: maxYValues + 'MB</b><br/>'
}
}],
navigation: {
menuItemStyle: {
fontSize: '8px'
}
}
});
},
Thank you
UPDATE: Added code snipped, and updated the image to what my current code is showing
I used Highchart to draw some charts in my page. And i was setting some properties for my charts. I see that for download and save charts in some type, Highchart used exporting. But properties of saved charts are not same of original chart.
for example my original chart is this:
My code is:
Highcharts.setOptions({ colors: color_items_array, locale: getPersianLocal()});
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
exporting: {
allowHTML:true ,
chartOptions: {
xAxis: {
labels: {
align: 'top',
}
},
},
buttons: {
contextButton: {
menuItems: [{
textKey: 'printChart',
onclick: function () {
this.print();
}
}, {
separator: true
}, {
textKey: 'downloadPNG',
onclick: function () {
this.exportChart();
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
this.exportChart({
type: 'image/jpeg'
});
}
}, {
textKey: 'downloadPDF',
onclick: function () {
this.exportChart({
type: 'application/pdf'
});
}
}, {
textKey: 'downloadSVG',
onclick: function () {
this.exportChart({
type: 'image/svg+xml'
});
}
}, {
separator: true
},{
text: 'Clinet side export to PNG',
onclick: function () {
this.exportChartLocal();
}
}, {
text: 'Clinet side export to SVG',
onclick: function () {
this.exportChartLocal({
type: 'image/svg+xml'
});
}
}]
}
}
},
chart: {
renderTo: conta,
type: type,
marginRight: 130,
marginBottom: 120
},
title: {
text: X_title,
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
// plotOptions: {
// column: {
// minPointLength: 20
// }
//},
xAxis: {
min:0,
max:maxVariable,
labels: {
//rotation: rotlab,
align: 'top',
// align: 'center',
autoRotation: [-45],
autoRotationLimit: 100
},
categories: xAxisLabel
},
yAxis: yAxisVariale,
plotOptions: {
series: {
dataLabels: {
enabled: dataLabelvariable,
// y: -5,
inside:false,
crop :false,
overflow :'none',
style: {
fontWeight: 'bold'
},
formatter: function() {
return Highcharts.localizationNumber(this.y);
},
useHTML: true
}
}
},
tooltip: {
crosshairs: [true, true],
shared: true,
useHTML: true,
formatter: function() {
var s = [];
s.push('<table><tr><td style="text-align:right;" colspan="3"><b>' +
this.x + '</b></td></tr>');
$.each(this.points, function(i, point) {
s.push('<tr><td style="text-align: right;">'+
'<b><span style="color:'+point.series.color +'">\u25CF</span></b>'+
'</td>'+
'<td style="text-align: right;"><b>'+point.series.name +' : </b></td>'+
'<td><b>' + Highcharts.localizationNumber(point.y)+'</b></td>'+
'</tr>');
});
s.push('<tr><td style="text-align:right;" colspan="3"><b>تعداد خبر : ' +
Highcharts.localizationNumber(this.points[0].point.NumberNews) + '</b></td></tr></table>');
return s.join('');
}
},
legend: {
labelFormatter: function() {
return '<b>'+this.name+'</b>';
},
borderWidth: 1,
useHTML: true,
borderColor: '#C98657',
backgroundColor: '#FCFFC5'
},
series: seris_column2,
scrollbar: {
enabled: scrbal,
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
}
});
});
My main problems are:
1) change font and size of strings(labels and titles ,..)
2) overlap of legent strings
3) when xaxis labels turn -45, labels go up.(for another example..)
I used :
exporting: {
allowHTML:true ,
chartOptions: {
xAxis: {
labels: {
align: 'top',
}
},
}
But didn't change any thing...
How can i do?
Thanks
I'm working with the highcharts stacked bar and want to remove some space between the bars so I can make room for some text I am rendering.
I've tried pointPadding and groupPadding but those are not working. I've tried minPadding/maxPadding on the xAxis and that did not do anything as well.
Seems the only way get rid of that space is to change the width of the whole chart which is what I really don't want.
Here is my fiddle:
http://jsfiddle.net/nick1572/dfcysj39/
$("#profit-chart").highcharts({
lang: {
thousandsSep: ","
},
chart: {
type: "column",
style: {
fontFamily: "Open Sans, sans-serif"
}
},
legend: {
enabled: false
},
title: {
text: ""
},
xAxis: {
//minPadding: 20, Not working here
//maxPadding:1, Not working here either
categories: [ "other business", "somekind of business profit" ],
labels: {
style: {
color: "#333333",
fontSize: "15px"
}
}
},
yAxis: {
gridLineDashStyle: "longdash",
title: {
text: "Dollars"
},
labels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.value, 0, "", ",");
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: "normal",
dataLabels: {
enabled: true,
color: "white",
inside: true,
useHTML: true,
style: {
fontSize: "18px",
fontWeight: "600"
}
}
},
series: {
//pointPadding: 0,
//groupPadding: 0, this does not work
animation: {
complete: function() {
}
},
pointWidth: 145
}
},
series: [ {
color: "#327631",
data: [ 0, 850 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0);
else return null;
}
}
}, {
color: "#ADC9AD ",
data: [ 10000, 10000 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.y, 0);
}
}
}]
},
function (chart) { // on complete
chart.renderer.text('<span class="bracketed">}</span> <em>Profit</em>', 870, 85)
.css({
color: 'green',
fontSize: '24px',
x: 200
})
.add();
});//End HighCharts Call
Thanks in advance!
it seems that the point width setting is conflicting with the groupPadding and pointPadding .. if you remove the pointWidth: 145 in the series and add groupPadding and pointPadding to the column you will get the gap removed. on the flipside however the bars will take up the entire available width of your chart.
column: {
stacking: "normal",
groupPadding: 0,//add here
pointPadding: 0,//add here
...
}
http://jsfiddle.net/dfcysj39/9/
Ok so I think this may solve my problem at this point. Not sure if its the right way but it works. The pointPadding and groupPadding partially worked for this particular problem. I thank you Birgit for taking the time to respond!!!
What I did to solve this is explicitly put a spacingRight on the chart to give the plot area more space w/o making the bars wider. I did go back and add some pointPadding to make the cols a little wider for aesthetics. This allowed for the rendered text to show.
http://jsfiddle.net/nick1572/dfcysj39/
$("#profit-chart").highcharts({
lang: {
thousandsSep: ","
},
chart: {
spacingRight: 220,
type: "column",
width: 1200,
style: {
fontFamily: "Open Sans, sans-serif"
}
},
legend: {
enabled: false
},
title: {
text: ""
},
xAxis: {
//minPadding: 20, Not working here
//maxPadding:1, Not working here either
categories: [ "other business", "somekind of business profit" ],
labels: {
style: {
color: "#333333",
fontSize: "15px"
}
}
},
yAxis: {
gridLineDashStyle: "longdash",
title: {
text: "Dollars"
},
labels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.value, 0, "", ",");
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: "normal",
dataLabels: {
enabled: true,
color: "white",
inside: true,
useHTML: true,
style: {
fontSize: "18px",
fontWeight: "600"
}
}
},
series: {
pointPadding: 0.05,
//groupPadding: 0, this does not work
animation: {
complete: function() {
}
}//,
//pointWidth: 145
}
},
series: [ {
color: "#327631",
data: [ 0, 850 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0);
else return null;
}
}
}, {
color: "#ADC9AD ",
data: [ 10000, 10000 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.y, 0);
}
}
}]
},
function (chart) { // on complete
chart.renderer.text('<span class="bracketed">}</span> <em>Profit</em>', 900, 84)
.css({
color: 'green',
fontSize: '24px',
x: 200
})
.add();
});//End HighCharts Call