Legend is not properly displayed on mobile view.
Posted: Sat Jul 02, 2016 12:19 pm
We have developed a page to display a chart with responsive and targeting for multiple browsers and mobile devices.We have written the below logic to display the legend at the bottom of the chart and woks fine for desktop view but facing an issue for mobile devices. When I tested it using Iphone5 and 6 device the legend is not displayed at the bottom but it displays when I change the legend position from bottom to top or left and right. I have attached an image for Iphone 5.
Is there any thing I need to do to display legend for mobile view?
Is there any thing I need to do to display legend for mobile view?
Code: Select all
//------------------ Create Legend with customized image.
chart1.axes.left.title.format.font.setSize(20);
chart1.axes.bottom.title.format.font.setSize(20);
chart1.axes.left.labels.decimals = 1;
chart1.axes.left.scroll = false;
//Legend
chart1.legend.title.visible = false;
chart1.legend.title.format.font.fill = "rgba(0,0,0,0.6)";
chart1.legend.title.format.font.setSize(12);
chart1.legend.format.font.setSize(12);
chart1.legend.format.stroke.fill = "silver";
chart1.legend.format.stroke.size = 3;
chart1.legend.format.font.shadow.visible = false;
chart1.legend.format.shadow.visible = false;
chart1.legend.position = "bottom";
chart1.legend.symbol.width = 20;
chart1.legend.format.gradient.visible = true;
chart1.legend.symbol.format.stroke.dash = [4, 4];
chart1.legend.symbol.style = "line";
chart1.legend.symbol.oldSymbolDraw = chart1.legend.symbol.draw;
chart1.legend.symbol.draw = function (series, index, x, y) {
var f = this.format = new Tee.Format(chart1);
var c = chart1.ctx, fhover = tryHover(series, index, chart1), old = f.fill, olds = f.stroke;
f.fill = series.legendColor(index);
f.stroke.fill = series.legendColor(index);
c.z = -0.01;
switch (series.pointer.style) {
case "ellipse": {
f.ellipse(x + this.width * 0.5, y, 10, 10);
break;
}
case "barSymbol": {
f.rectangle(x + 5 * 2, y - 5.5, 1, 14);
break;
}
case "lineSymbol": {
f.rectangle(x + 5 * 0.5, y - 5.5, 10, 14);
break;
}
case "targetSymbolRectangle": {
f.rectangle(x + 5 * 0.5, y - 4.5, 14, 12);
break;
}
default: {
this.oldSymbolDraw(series, index, x, y);
break;
}
}
}
chart1.draw(); //get positions
resize(chart1);
//----------Resize the chart
function resize(Chart1) {
if (!Chart1) return;
var canvas = Chart1.canvas;
var proposedWidth = 81;
var proposedHeight = 72;
if (screen.height <= 900)
proposedHeight = 72;
else if (screen.height > 910 && screen.height <= 1200)
proposedHeight = 55;
//set width to canvas
var w = canvas.parentNode.clientWidth;
if (canvas.parentNode.clientWidth == 0) {
w = proposedWidth * window.innerWidth / 100;
}
canvas.width = w;
canvas.setAttribute('width', "" + w + "px");
canvas.style.width = "" + w + "px";
//set height to canvas
var h = proposedHeight * window.innerHeight / 100;
//Adjust the height and set min height
if (h < 400) h = 400;
canvas.height = h;
canvas.setAttribute('height', "" + h + "px");
canvas.style.height = "" + h + "px";
Chart1.canvas.width = w;
Chart1.canvas.height = h;
Chart1.bounds.width = w;
Chart1.bounds.height = h;
Chart1.draw();
console.log(Chart1);
}