I want to minify the chart Interface. Currently I am using chart with size 600 x 300 px, which is working fine.
Now I want to show 3 charts at the same place so in order to save space. I want to show 3 charts thumbnails (working charts). If user click on any chart it should appear as full chart. I can show it on the popup or expand it on the page itself.
I checked the Highchart website. It provide option to resize chart using height & width properties.
http://api.highcharts.com/highcharts/chart.height
http://api.highcharts.com/highcharts/chart.width
This option do not actually resize the chart. Char layout get smaller but the title label stay at the same size. I want chart to resize and work in a smaller version with text and chart show in smaller box like 100 x 100 px.
I can use chart.setSize(); function to resize the chart.
Does it make any sense? Please guide me.
I am using highcharts 5.0 version js file.
Here is my code:
var seriesData1 = {
name: "Series1Label",
data: Series1Data
},
seriesData2 = {
"name": "Series2Label",
"data": Series2Data
},
seriesData3 = {
"name": "Series3Label",
"data": Series3Data
},
completedData = [seriesData2, seriesData3, seriesData1];
var elem = par.find('<some class>');
elem.highcharts({
chart: {
type: 'areaspline'
},
colors: ['#21d0b8', '#2248B5', '#5B82A1'],
title: {
text: ""
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
useHTML: true,
itemDistance: 5,
},
xAxis: {
'title': {
text: xAxisTitle
},
categories: categories,
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
}
}
},
areaspline: {
fillOpacity: 0.8
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: completedData,
exporting: {
buttons: {
contextButton: {
text: 'Export',
useHTML: true,
align: 'right',
symbolY: 15,
}
}
},
responsive: {
rules: [{
condition: {
maxWidth: 100
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled:false,
},
title: {
text: null
}
},
xAxis: {
labels: {
enabled:false,
},
title: {
text: null
}
},
title:{
text: '',
},
subtitle: {
text: null
},
tooltip:{
enabled:false,
},
legend:{
enabled:false,
},
credits: {
enabled: false
}
}
}]
}
});
The 'elem' chart element occurs 7 times on a single page, so I have made a single code to fill all the charts on different data and trigger them all at single function.
I need all the 7 charts to show in thumbnail and show certain chart in large size on user click.
using your example when I update my code.
var getChart = ele_.highcharts({.....});
Resize code:
getChart.setSize(100, 100);
Error encountered
getChart.setSize is not a function
Can anyone guide me how to fix this issue?
