Exporting png in HighCharts - highcharts

I have a problem with displaying values ​​in my graph, when I downloading, the values middle line is displayed, but the columns value is not.
I want to display the value of the columns and not the average. Help me please!
exporting: {
sourceWidth: 1920,
sourceHeight: 600,
buttons: {
contextButton: {
menuItems: ['downloadPNG']
}
},
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
}
}


I think that the simple changes from:
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
}
to:
chartOptions: {
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
}
}
should be enough to achieve your requirement. Demo: https://jsfiddle.net/BlackLabel/r9yn0wx5/

Related

Highcharts: xAxis label of bar chart are overlapped

How can I change height of the rows depending on the number of lines for labels?
Actual behavior
Expected behavior
You can see Highchart options below:
Options:
var options = {
chart: {
type: 'bar',
reflow: false,
plotOptions: {
series: {
minPointLength: 3,
dataLabels: {
enabled: true,
crop: false,
overflow: "none"
},
pointWidth: 20+11,
pointPadding: 5
}
},
xAxis: {
categories: xData,
labels: {
step: 1,
enabled: true,
style: {
fontSize: '100%',
color: '#000000'
}
}
}
};

Highstock Range Selector Buttons to PDF Export Dropdown

I have been able to convert my range selector buttons in to a dropdown rather than displaying as a list. And seperately, adding the export to PDF/Image dropdown.
What i am now trying to achieve is integrate the range selector dropdown buttons in to the same dropdown as the Export, or vice versa.
Export:
exporting: {
enabled: true,
allowHtml: true,
accessibility: {
enabled: true,
},
buttons: {
contextButtons: {
enabled: true
}
}
}
Range selector:
exporting: {
buttons: {
contextButton: {
enabled: false
},
toggle: {
text: 'Select range',
align: 'left',
height: 20,
y: -3,
theme: {
'stroke-width': 0.5,
stroke: '#000000',
r: 2
},
menuItems: [{
text: '1M',
onclick: function() {
this.rangeSelector.clickButton(0, true);
}
}, {
text: '3M',
onclick: function() {
this.rangeSelector.clickButton(1, true);
}
}, {
text: '6M',
onclick: function() {
this.rangeSelector.clickButton(2, true);
}
}, {
text: 'YTD',
onclick: function() {
this.rangeSelector.clickButton(3, true);
}
}, {
text: '1Y',
onclick: function() {
this.rangeSelector.clickButton(4, true);
}
}, {
text: 'All',
onclick: function() {
this.rangeSelector.clickButton(5, true);
}
}]
}
}
},
Example:
http://jsfiddle.net/8rrotg5a/

Add default items to menuItems array:
exporting: {
buttons: {
contextButton: {
enabled: false
},
toggle: {
...,
menuItems: [..., {
text: 'All',
onclick: function() {
this.rangeSelector.clickButton(5, true);
}
},
'separator',
'viewFullscreen',
'printChart',
'separator',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG'
]
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/j7s8xgtr/
API Reference: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems

How to remove the stroke around the single points in a highcharts area. Highcharts

I have a plotted single point data on my highcharts with chart type ="area".
here is the code:
xtype: 'container',
ref: 'chartContainer',
height: 170,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'qxhighchart',
ref: '../confirmedChart',
cls: 'qx-highchart-ct severity-chart',
flex: 1,
showLegend: true,
chartConfig: Qx.chart.Highchart.Configs.get('area',
{
xAxis: {
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
labels: {
formatter: function () {
return this.value;
}
}
},
plotOptions: {
area: {
marker: {
enabled: true,
states: {
hover: {
enabled: true
}
}
}
},
series: {
allowPointSelect: true,
shadow: false,
dataLabels: {
enabled: false
},
marker: {
states: {
select: {
fillColor: "#FFFFFF",
radius: 5,
lineColor: null
}
}
}
}
},
series: [{
name: "A",
id: "a",
type: 'area',
color: '#d5bcfc',
lineColor: '#d5bcfc'
},{
name: "B",
id: "b",
type: 'area',
color: '#5da7e3',
lineColor: '#5da7e3'
}]
})
}]
The output of the is attached:
As you can see I'm getting a stoke fill with a blue color around the single points. I want to get rid of them. From the above code, I tried removing few properties but that didnt help.
here is what I'm expecting the look of single points something like below with all circle shapes
Any ideas around how to remove the border from the points?

You can remove a border (stroke) by setting plotOptions.series.marker.lineWidth = 0. To change all points to circle shape set plotOptions.series.marker.symbol = 'circle'.
Code:
plotOptions: {
series: {
marker: {
lineColor: null,
lineWidth: 0,
symbol: 'circle'
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/zLn8o2tf/
API reference:
https://api.highcharts.com/highcharts/plotOptions.series.marker.lineWidth
https://api.highcharts.com/highcharts/plotOptions.series.marker.symbol

Highcharts/Highmaps in ionic - map is not showing

Add Plugin 'angular2-highcharts'
add code in ionViewDidLoad()
var chart = Highcharts.mapChart('container', {
chart: {
map: 'custom/europe',
spacingBottom: 20
},
title: {
text: 'Europe time zones'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: false,
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
// Only show dataLabels for areas with high label rank
format: null,
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2'];
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
})

Highcharts: remove 1 label from windrose chart

I have created a wind rose type chart using highcharts, and something like a label
that needs to be removed
I tried using: { lables: { enabled: false } } and also tried using
showFirstLabel and showLastLabel
But it didn't work for me :(
Here is how i created the wind rose chart:
wind_rose_chart = Highcharts.data({
table: 'roulette_windrose',
startRow: 1,
endRow: 38,
endColumn: 37,
complete: function (options) {
// Create the chart
window.chart = new Highcharts.Chart(Highcharts.merge(options, {
chart: {
renderTo: 'windrose_container',
polar: true,
type: 'column',
animation: false,
backgroundColor: '#e4e6e1',
plotBackgroundImage: "/images/gallery/windrose_roulette.png",
height: 400,
width: 350,
},
colors: ['#008403',
'#E30000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000',
'#000000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000',
'#E30000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000',
'#000000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000'],
title: {
text: 'Spots'
},
pane: {
size: '70%'
},
legend: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
showFirstLabel: false,
showLastLabel: false,
tickmarkPlacement: 'on',
lineWidth:0,
gridLineWidth: 0
},
yAxis: {
min: 0,
gridLineWidth: 0,
endOnTick: false,
showLastLabel: false,
showFirstLabel: false,
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return this.y;
}
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on',
}
},
navigation: {
buttonOptions: {
enabled: true
}
},
exporting: {
enabled: true
},
credits: {
enabled: false
}
}));
}
});

following code is working:
yAxis: {
...
labels: {
enabled: false
}
}
DEMO

Resources