X & Y axis lable and title not visible

[dilipt]

X & Y axis lable and title not visible

[dilipt]

Earlier same graph was rendering properly but suddenly we are facing above issues. We want graph to be like this.

`<script type=”text/javascript”>
$(function () {
//Better to construct options first and then pass it as a parameter
var options = {
theme: “theme1”,
exportEnabled: true,
animationEnabled: true,
zoomEnabled: true,
title: {
text: “Bandwidth Graph – (17-03-2016)”,
fontSize: 25,
},
toolTip:{ shared: true },
axisY: {
title: “Mega Bits”,
gridThickness: 1,
stripLines:[
{
lable: 23630,
value:23630,
color:”red”,
labelFormatter: function (e) {
return “85%”;
}
}
]
},
axisX: { title: “Time”, labelFontSize: 14, interval: 6, labelAngle: -90, gridThickness: 1,
gridColor: “#c9c9c9”, interlacedColor: “#f9f9f9”},
legend: {
cursor: “pointer”,
itemclick: function (e) {
//console.log(“legend click: ” + e.dataPointIndex);
//console.log(e);
if (typeof (e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}

e.chart.render();
}
},
data:
[
{
type: “splineArea”, //change it to line, area, bar, pie, etc
name: “Download”,
showInLegend: true,
//toolTipContent:”test”,
dataPoints: [ { label: “00:00″, y: 17155.39, name:”Download (62 %)” },{ label: “00:10″, y: 16694.18, name:”Download (60 %)” },{ label: “00:20″, y: 16026.8, name:”Download (58 %)” },{ label: “00:30″, y: 15236.22, name:”Download (55 %)” },{ label: “00:40″, y: 14405.73, name:”Download (52 %)” },{ label: “00:50″, y: 13702.21, name:”Download (49 %)” },{ label: “01:00″, y: 13140.99, name:”Download (47 %)” },{ label: “01:10″, y: 12095.45, name:”Download (44 %)” },{ label: “01:20″, y: 11096.56, name:”Download (40 %)” },{ label: “01:30″, y: 10423.5, name:”Download (37 %)” },{ label: “01:40″, y: 9696.78, name:”Download (35 %)” },{ label: “01:50″, y: 9089.4, name:”Download (33 %)” },{ label: “02:00″, y: 8591.37, name:”Download (31 %)” },{ label: “02:10″, y: 7970, name:”Download (29 %)” },{ label: “02:20″, y: 7431.29, name:”Download (27 %)” },{ label: “02:30″, y: 6916.99, name:”Download (25 %)” },{ label: “02:40″, y: 6462.06, name:”Download (23 %)” },{ label: “02:50″, y: 6027.18, name:”Download (22 %)” },{ label: “03:00″, y: 5689.55, name:”Download (20 %)” },{ label: “03:10″, y: 5400.18, name:”Download (19 %)” },{ label: “03:20″, y: 5111.75, name:”Download (18 %)” },{ label: “03:30″, y: 4799.47, name:”Download (17 %)” },{ label: “03:40″, y: 4555.83, name:”Download (16 %)” },{ label: “03:50″, y: 4374.89, name:”Download (16 %)” },{ label: “04:00″, y: 4216.19, name:”Download (15 %)” },{ label: “04:10″, y: 4080.38, name:”Download (15 %)” },{ label: “04:20″, y: 3853.4, name:”Download (14 %)” },{ label: “04:30″, y: 3735.24, name:”Download (13 %)” },{ label: “04:40″, y: 3647.54, name:”Download (13 %)” },{ label: “04:50″, y: 3589.82, name:”Download (13 %)” },{ label: “05:00″, y: 3503.52, name:”Download (13 %)” },{ label: “05:10″, y: 3478.6, name:”Download (13 %)” },{ label: “05:20″, y: 3501.09, name:”Download (13 %)” },{ label: “05:30″, y: 3574.67, name:”Download (13 %)” },{ label: “05:40″, y: 3690.83, name:”Download (13 %)” },{ label: “05:50″, y: 3717.8, name:”Download (13 %)” },{ label: “06:00″, y: 3779.63, name:”Download (14 %)” },{ label: “06:10″, y: 4023.07, name:”Download (14 %)” },{ label: “06:20″, y: 4196.06, name:”Download (15 %)” },{ label: “06:30″, y: 4433.34, name:”Download (16 %)” },{ label: “06:40″, y: 4519.73, name:”Download (16 %)” },{ label: “06:50″, y: 4906.9, name:”Download (18 %)” },{ label: “07:00″, y: 5312.82, name:”Download (19 %)” },{ label: “07:10″, y: 5609.04, name:”Download (20 %)” },{ label: “07:20″, y: 6120.28, name:”Download (22 %)” },{ label: “07:30″, y: 6533.79, name:”Download (24 %)” },{ label: “07:40″, y: 6933.96, name:”Download (25 %)” },{ label: “07:50″, y: 7449.61, name:”Download (27 %)” },{ label: “08:00″, y: 7817.89, name:”Download (28 %)” },{ label: “08:10″, y: 8174.24, name:”Download (29 %)” },{ label: “08:20″, y: 8721.31, name:”Download (31 %)” },{ label: “08:30″, y: 9173.27, name:”Download (33 %)” },{ label: “08:40″, y: 9681.57, name:”Download (35 %)” },{ label: “08:50″, y: 10325.12, name:”Download (37 %)” },{ label: “09:00″, y: 10896.19, name:”Download (39 %)” },{ label: “09:10″, y: 11617.87, name:”Download (42 %)” },{ label: “09:20″, y: 13089.52, name:”Download (47 %)” },{ label: “09:30″, y: 14164.23, name:”Download (51 %)” },{ label: “09:40″, y: 15012.41, name:”Download (54 %)” },{ label: “09:50″, y: 15694.7, name:”Download (56 %)” },{ label: “10:00″, y: 16287.41, name:”Download (59 %)” },{ label: “10:10″, y: 17217.25, name:”Download (62 %)” },{ label: “10:20″, y: 18082.53, name:”Download (65 %)” },{ label: “10:30″, y: 18841.13, name:”Download (68 %)” },{ label: “10:40″, y: 19622.54, name:”Download (71 %)” },{ label: “10:50″, y: 20150.58, name:”Download (72 %)” },{ label: “11:00″, y: 20562.39, name:”Download (74 %)” },{ label: “11:10″, y: 20680.16, name:”Download (74 %)” },{ label: “11:20″, y: 20472.63, name:”Download (74 %)” },{ label: “11:30″, y: 20658.52, name:”Download (74 %)” }, ]
},
{
type: “line”, //change it to line, area, bar, pie, etc
name: “Upload”,
color: “blue”,
showInLegend: true,
dataPoints: [ { label: “00:00″, y: 3046.23, name:”Upload (11 %)” },{ label: “00:10″, y: 2941.46, name:”Upload (11 %)” },{ label: “00:20″, y: 2797.15, name:”Upload (10 %)” },{ label: “00:30″, y: 2661.38, name:”Upload (10 %)” },{ label: “00:40″, y: 2537.56, name:”Upload (9 %)” },{ label: “00:50″, y: 2419.36, name:”Upload (9 %)” },{ label: “01:00″, y: 2317.91, name:”Upload (8 %)” },{ label: “01:10″, y: 2202.67, name:”Upload (8 %)” },{ label: “01:20″, y: 2055.75, name:”Upload (7 %)” },{ label: “01:30″, y: 1971.14, name:”Upload (7 %)” },{ label: “01:40″, y: 1893.49, name:”Upload (7 %)” },{ label: “01:50″, y: 1785.23, name:”Upload (6 %)” },{ label: “02:00″, y: 1694.75, name:”Upload (6 %)” },{ label: “02:10″, y: 1654.2, name:”Upload (6 %)” },{ label: “02:20″, y: 1574.88, name:”Upload (6 %)” },{ label: “02:30″, y: 1512.24, name:”Upload (5 %)” },{ label: “02:40″, y: 1472.42, name:”Upload (5 %)” },{ label: “02:50″, y: 1409.52, name:”Upload (5 %)” },{ label: “03:00″, y: 1354.07, name:”Upload (5 %)” },{ label: “03:10″, y: 1306.25, name:”Upload (5 %)” },{ label: “03:20″, y: 1281.27, name:”Upload (5 %)” },{ label: “03:30″, y: 1235.79, name:”Upload (4 %)” },{ label: “03:40″, y: 1190.19, name:”Upload (4 %)” },{ label: “03:50″, y: 1149.54, name:”Upload (4 %)” },{ label: “04:00″, y: 1132.04, name:”Upload (4 %)” },{ label: “04:10″, y: 1119.95, name:”Upload (4 %)” },{ label: “04:20″, y: 1101.64, name:”Upload (4 %)” },{ label: “04:30″, y: 1090.25, name:”Upload (4 %)” },{ label: “04:40″, y: 1087.96, name:”Upload (4 %)” },{ label: “04:50″, y: 1073.05, name:”Upload (4 %)” },{ label: “05:00″, y: 1051.65, name:”Upload (4 %)” },{ label: “05:10″, y: 1037.48, name:”Upload (4 %)” },{ label: “05:20″, y: 1046.01, name:”Upload (4 %)” },{ label: “05:30″, y: 1053.32, name:”Upload (4 %)” },{ label: “05:40″, y: 1079.76, name:”Upload (4 %)” },{ label: “05:50″, y: 1088.29, name:”Upload (4 %)” },{ label: “06:00″, y: 1104.11, name:”Upload (4 %)” },{ label: “06:10″, y: 1126.04, name:”Upload (4 %)” },{ label: “06:20″, y: 1166.02, name:”Upload (4 %)” },{ label: “06:30″, y: 1204.5, name:”Upload (4 %)” },{ label: “06:40″, y: 1205.28, name:”Upload (4 %)” },{ label: “06:50″, y: 1288.54, name:”Upload (5 %)” },{ label: “07:00″, y: 1356.92, name:”Upload (5 %)” },{ label: “07:10″, y: 1396.19, name:”Upload (5 %)” },{ label: “07:20″, y: 1483.96, name:”Upload (5 %)” },{ label: “07:30″, y: 1568.91, name:”Upload (6 %)” },{ label: “07:40″, y: 1661.88, name:”Upload (6 %)” },{ label: “07:50″, y: 1733.26, name:”Upload (6 %)” },{ label: “08:00″, y: 1777.6, name:”Upload (6 %)” },{ label: “08:10″, y: 1844.8, name:”Upload (7 %)” },{ label: “08:20″, y: 1924.38, name:”Upload (7 %)” },{ label: “08:30″, y: 1986.25, name:”Upload (7 %)” },{ label: “08:40″, y: 2053.99, name:”Upload (7 %)” },{ label: “08:50″, y: 2137.13, name:”Upload (8 %)” },{ label: “09:00″, y: 2199.91, name:”Upload (8 %)” },{ label: “09:10″, y: 2306.49, name:”Upload (8 %)” },{ label: “09:20″, y: 2441.84, name:”Upload (9 %)” },{ label: “09:30″, y: 2571.09, name:”Upload (9 %)” },{ label: “09:40″, y: 2706.93, name:”Upload (10 %)” },{ label: “09:50″, y: 2803.71, name:”Upload (10 %)” },{ label: “10:00″, y: 2913, name:”Upload (10 %)” },{ label: “10:10″, y: 3071.29, name:”Upload (11 %)” },{ label: “10:20″, y: 3226, name:”Upload (12 %)” },{ label: “10:30″, y: 3342.54, name:”Upload (12 %)” },{ label: “10:40″, y: 3477.18, name:”Upload (13 %)” },{ label: “10:50″, y: 3565.33, name:”Upload (13 %)” },{ label: “11:00″, y: 3663.62, name:”Upload (13 %)” },{ label: “11:10″, y: 3749.18, name:”Upload (13 %)” },{ label: “11:20″, y: 3825.31, name:”Upload (14 %)” },{ label: “11:30″, y: 3879.87, name:”Upload (14 %)” }, ]
},
{
type: “line”, //change it to line, area, bar, pie, etc
name: “Backup”,
color: “red”,
showInLegend: true,
dataPoints: [ ]
}

]
};
$(“#chart1″).CanvasJSChart(options);
});
</script>
<center><div id=”chart1″ style=”height: 500px; width: 70%;”></div>

[Vishwas R]

Dilipt,

I reproduced your code in jsfiddle, its working fine and labels are shown in chart. Here is the fiddle for the same.

[dilipt]

Thanks Vishwas for prompt reply.
But one I re-size panes whole graph disappears.
In your documentation also some times example graph is not visible in right side area.
Is there any problem ?

[Vishwas R]

Dilip,

Kindly provide the operating system and browser being used along with their versions, so that we can have a look at the issue and help you out.

[dilipt]

I am using Windows 7 Professional (64 bit) and Google Chrome Version 49.0.2623.87 m.

[Vishwas R]

We were not able to reproduce the issue yet on Win7 + Chrome 49. Does your system have any graphic card installed? If yes, which model. Also, can you try restarting the machine once and see if it is still reproducible.

[dilipt]

Yes, We have AMD 760G Graphic card.
PC Restarted, still problem persists.

I think its problem with Graphic Card.

[Sunil Urs]

Earlier we had come across a similar issue with Chrome when Canvas is GPU accelerated (default). Google fixed the issue after sometime.

Please try disabling GPU accelerated rendering in Chrome and see if it helps.

—
Sunil Urs

[dilipt]

Many Thanks … disabling GPU accelerated rendering resolved the issue.