highcharts brings an option to be able to export my graph in different example formats (PNG, JPG among others), that is in the upper right part of the 3-line menu.
How can I increase the width of my graph when exporting it in any of those formats:
Currently the problem I have is that when I export the graph and open the image it does not show me the data of the Spline in the last month, and I need it to show all the data that is not left unseen.
You can do the test by exporting the graph in some format, it can be in PNG and there you will realize that in the last month it does not show me the value of the kilometers at the end.
Highcharts.chart('rotacionanio240', {
colors: ['#00ff6c','#03deec','#f5940a'],
chart: {
type: 'column'
},
title: {
text: 'ROTACIONES - FLOTA: <b>240</b> ACUMULADO'
},
subtitle: {
text: 'Acumulado - Período: 2019'
},
xAxis: {
type: 'category'
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Km rotación',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Cantidad de llantas',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} ',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true,
max: 300,
min: 0,
startOnTick: false
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
},
}
},legend: {
align: 'center',
borderWidth: 0
},
series: [{
type: 'column',
name: 'Cantidad',
color: '#6de8f0',
yAxis: 1,
data: [
[
'2019-01',
55
],
[
'2019-02',
72
],
[
'2019-03',
54
],
[
'2019-04',
51
],
[
'2019-05',
68
],
[
'2019-06',
33
],
[
'2019-07',
51
],
[
'2019-08',
86
],
[
'2019-09',
38
],
[
'2019-10',
51
],
[
'2019-11',
26
],
],
marker: {
lineWidth: 5,
lineColor: Highcharts.getOptions().colors[5],
fillColor: 'white'
},dataLabels: {
enabled: true,
color: 'black'
}
},{
type: 'spline',
name: 'KM',
color: '#03deec',
data: [
[
'2019-01',
30262
],
[
'2019-02',
32000
],
[
'2019-03',
28368
],
[
'2019-04',
28991
],
[
'2019-05',
27050
],
[
'2019-06',
28323
],
[
'2019-07',
31218
],
[
'2019-08',
27697
],
[
'2019-09',
26401
],
[
'2019-10',
25961
],
[
'2019-11',
25480
],
],
marker: {
lineWidth: 5,
lineColor: Highcharts.getOptions().colors[5],
fillColor: 'white'
},dataLabels: {
enabled: true,
color: 'red'
}
},
]
});
<div id="rotacionanio240" style="min-width: 310px; height: 400px; margin: 0 auto; margin-top:20px;"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
Thank you very much.
You can fix your problem by changing the font size to 10px like so: