Highchart - Column chart not coming proper in export api as image - highcharts

I am getting image from highchart server to add into my pdf. But when I eport an column chart the column bars are coming at below the x-axis and not on the axis itself. Below is demo url
https://jsfiddle.net/ztcv2rhj/6/
Highcharts.chart('column-container-print',{
chart: {
animation: false,
type: "column",
marginLeft: 80
},
credits:false,
title:{
text: "Top 5 Questions"
},
subtitle: false,
yAxis: {
allowDecimals: false,
min: 0,
} ,
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
xAxis: {
categories: ["Are the characters clear and readable? Keyboards should be kept clean. If characters still can't be read, the keyboard may need modifying or replacing. Use a keyboard with a matt finish to reduce glare and/or reflection.","Does the keyboard tilt? Note, the tilt need not be built in.","Does the user have good keyboard technique?","Is it possible to find a comfortable keying position? Try pushing the display screen further back to create more room for the keyboard, hands and wrists. Users of thick raised keyboards may need a wrist rest.","Is the keyboard separate from the screen?"],
labels: {
rotation: -45
},
},
series: [{"name":"No","data":[1,1,1,1,1]}]
});

This issue occurs because you are providing chart.options as options to export. Instead, you should provide chart.userOptions.
Code:
var optionsStr = JSON.stringify(chart.userOptions);
var dataString = encodeURI('async=true&type=jpeg&scale=4&options=' + optionsStr);
Demo:
https://jsfiddle.net/BlackLabel/6mw03r7c/

Related

Highcharts heatmap not rendering squares or rectangles

Can someone help me to understand what is wrong here. Everything seems perfect.
http://jsfiddle.net/prakash4mail/nt86gj7z/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
borderWidth: 1,
data: [[2020-04-01, 18000, 29060],[2020-04-01, 18500, 9920],[2020-04-01, 19000, 32160],[2020-04-02, 18000, 12400],[2020-04-02, 18500, 91880],[2020-04-02, 19000, 54000],[2020-04-03, 18000, 63540],[2020-04-03, 18500, 43420],[2020-04-03, 19000, 43420]],
dataLabels: {
enabled: true,
color: '#000000'
},
}]
});
});
heatMap showing lines instead of squares
The exact answer is rowsize: 500 (from UI perspective - height, YAxis difference between each point) and colsize: 86400000 (one day each, x-axis difference between each point). Missing this was causing box not to appear.
As I understood you would like to achieve something like is rendered here: http://jsfiddle.net/BlackLabel/o6ywag42/
Notice how the data structure looks like in this demo from Highcharts demo base:
https://jsfiddle.net/BlackLabel/uofntb4y/ - if you want to keep the points as a square the 'y' value must be growing one by one, like here: http://jsfiddle.net/BlackLabel/o7bgq1pu/
And to show your truly y scale you can use the categories feature.
yAxis: {
categories: ['18000', '18500', '19000']
},
API: https://api.highcharts.com/highcharts/yAxis.categories
EDIT:
Another solution suggested by #prakash is to use the series.rowsize property and series.colsize to fit the squares.
API: https://api.highcharts.com/highcharts/series.heatmap.rowsize
API: https://api.highcharts.com/highcharts/series.heatmap.colsize

Highcharts - Only Returning One Date on xAxis

In my area chart I have three series which are presorted chronologically. This is what I am currently getting to display:
I'm using React which is why you see multiple renders, just ignore that. My dates that I am returning for the xAxis are in order but I'm only getting one. Why is that? Here is my code (using React Highcharts but it shouldn't matter I don't think):
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
const dayStr = moment.unix(this.value).format('D');
const monthStr = moment.unix(this.value).format('M');
console.log(`${monthStr}/${dayStr}`, this.value);
return `${monthStr}/${dayStr}`;
},
align: 'left',
style: { "color": "#FFFFFF" }
},
title: {
text: 'Date',
style: { "color": "#FFFFFF" }
}
},
As you can see my formatter function is returning multiple dates but only one displays.
By default Highcharts algorithms decide which ticks to display (labels are drawn where the ticks are). Also some labels might be omitted when there's no enough space to place them.
Use tickPositions to force Highcharts to draw given ticks. You can also try tickPositioner to modify the ticks generated automatically.
API references:
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.tickPositioner

Highcharts: Bar with negative stack - Place title text at each side

I'm wondering if it is possible to place two text titles at each side (negative/positive), centralized on each side.
I tried with this jsfiddle.
...
yAxis: [{
title: {
text: "right",
align: "right"
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
{
title: {
text: "left",
align: "left"
}
}
I tried to add another yxis, but it doesn't work.
you can only set xaxis title to
"low", "middle" by default, "high"
but for multiple title ,i think its not possible via api, it depends on your axis.
like you have one xaxis and 2 yaxis,
so you can have title separatly on both yaxis but not on xaxis.
the problem is you cant get the center point (0,0), if you can get Y of this point then you can update Y for the title.

Highcharts formatting: labels, datapoints and scale?

I have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}

dataLabel text align in highchart

I want to dynamically align the dataLabel in center of two bars.
The data which is visible dynamically appears either for green or the blue bar by using :
dataLabels: {
enabled: true,
formatter: function() {
return this.point.avg;
}
}
I dont want to use x and y attributes, as data can appear for any of the bar. Hope below mentioned image gives you a clear picture.
Note: The value of avg_fare does not represent the bar's value.
Can anyone help me to achieve this usecase?
Thanks
You can use the dataLabels.y parameter to offset the label into the position you desire.
series: [{
data: series1,
dataLabels: {
enabled: true,
y: -14 // move this down
}
}, {
data: series2,
dataLabels: {
enabled: true,
y: 14 // move this one up
}
}]
Here's a fiddle.
enable datalables only for one. and disable for all the remaining ones.
position that single label as you want by seetting x and y Values
dataLabels: {
align:'left',
enabled: true,
x: 20,
y: -10
},
you can refer this as example : http://jsfiddle.net/fMdk3/
Hope this will help you

Resources