Resize chart for mobile view
Posted: Mon May 02, 2016 11:25 am
The legend is not resized along with the canvas when we access the chart for mobile devices. Below function is used to resize the chart and legend.
Is there any way to fix the legend issue for a mobile device?
Code: Select all
function resize(chart) {
if (!chart) return;
var canvas = chart.canvas;
startWidth = 500;
startHeight = 600;
var w = startWidth;
var h = startHeight;
if ((window.innerWidth - 156 - canvas.offsetLeft - 20) < startWidth)
w = window.innerWidth - 156 - canvas.offsetLeft - 20;
else
w = startWidth;
if ((window.innerHeight - 70 - canvas.offsetTop - 20) < startHeight)
h = window.innerHeight - 70 - canvas.offsetTop - 20;
else
h = startHeight;
canvas.setAttribute('width', "" + w + "px");
canvas.setAttribute('height', "" + h + "px");
canvas.style.width = "" + w + "px";
canvas.style.height = "" + h + "px";
chart.bounds.width = w;
chart.bounds.height = h;
var divWidth = document.getElementById("foo").offsetWidth;
if (divWidth != 0) {
canvas.setAttribute('width', "" + divWidth - 10 + "px");
canvas.setAttribute('height', "" + h + "px");
canvas.style.width = "" + divWidth - 10 + "px";
canvas.style.height = "" + h + "px";
chart.bounds.width = divWidth - 10;
chart.bounds.height = h;
}
chart.draw();
}