I have a graph like in the picture. But I am having trouble with the labels. I can not show all of the labels. When I hover on it it shows the label, but when I print it it doesn't display.
var chart = new CanvasJS.Chart('chartContainer',
{
animationEnabled: true,
theme: 'theme4',
title: { text: '' },
axisY: { maximum: 100 , title: 'Faiz'},
axisX: { labelAngle: -70 },
exportEnabled: true,
data: [{
type: 'column',
indexLabel: '{y}',
indexLabelPlacement: 'outside',
indexLabelOrientation: 'horizontal',
indexLabel: '{y}',
dataPoints: [
{ label: 'Azərbaycan dili', y: 51 },
{ label: 'Ədəbiyyat', y: 71 },
{ label: 'Cəbr', y: 51 },
{ label: 'Həndəsə', y: 61 },
{ label: 'Fizika', y: 60 },
{ label: 'Kimya', y: 56 },
{ label: 'Biologiya', y: 49 },
{ label: 'Tarix', y: 62 },
{ label: 'Azərbaycan tarixi', y: 70 },
{ label: 'Coğrafiya', y: 58 },
{ label: 'Xarici dil', y: 57 },
{ label: 'İnformatika', y: 62 },
{ label: 'Rus dili', y: 43 },
{ label: 'Riyaziyyat', y: 53 }
]
}]
});
chart.render();
Try adding:
culture: "es",
to your object config after title: { text: '' },
Some of the labels hide in order to avoid overlapping due to insufficient width. In your case if you do this:
axisX: {
interval: 1,
labelAngle: -70
}
it should work.
var chart = new CanvasJS.Chart('chartContainer',
{
animationEnabled: true,
theme: 'theme4',
title: { text: '' },
axisY: { maximum: 100 , title: 'Faiz'},
axisX:{
interval: 1,
labelAngle: -70
},
exportEnabled: true,
data: [{
type: 'column',
indexLabel: '{y}',
indexLabelPlacement: 'outside',
indexLabelOrientation: 'horizontal',
indexLabel: '{y}',
dataPoints: [
{ label: 'Azərbaycan dili', y: 51 },
{ label: 'Ədəbiyyat', y: 71 },
{ label: 'Cəbr', y: 51 },
{ label: 'Həndəsə', y: 61 },
{ label: 'Fizika', y: 60 },
{ label: 'Kimya', y: 56 },
{ label: 'Biologiya', y: 49 },
{ label: 'Tarix', y: 62 },
{ label: 'Azərbaycan tarixi', y: 70 },
{ label: 'Coğrafiya', y: 58 },
{ label: 'Xarici dil', y: 57 },
{ label: 'İnformatika', y: 62 },
{ label: 'Rus dili', y: 43 },
{ label: 'Riyaziyyat', y: 53 }
]
}]
});
chart.render();
.description {
margin-top: 50px;
text-align:left;
font-family: calibri;
font-size: 16px;
color: gray;
}
a:link, a:visited, a:active {
color: #4F81BC;
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;margin-top:30px;"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With