Canvas.js not showing all label - javascript

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>


This should definitely work. I got the similar issue I could resolve it by adding this :
axisX: {
interval: 1,
labelAngle: -70
}

Related

chartjs datapoints breakes

I don't know If I have done anything wrong or if this is just an annoying bug.
I want to be able to have two charts on top of each other and have the 24-hour format
so the x-axis should start from 0 and go to 23:59
When I add one datapoint to the chart it works and it does not break. As soon as I add another datapoint it breaks.
If you look at the image the Monthly totals works, but as soon as I get the data2 info then some data points on the red line just start to break.
Also I don't know how to remove some of the labels since there are duplicates
Codesandbox link to bug
This is how my datapoints are
let dailyGeneration = [
{ x: "00:01:00", y: 1 },
{ x: "00:10:00", y: 8 },
{ x: "00:16:00", y: 9 },
{ x: "00:21:00", y: 4 },
{ x: "00:53:00", y: 8 },
{ x: "01:01:00", y: 2 },
{ x: "01:03:10", y: 5 },
{ x: "01:11:01", y: 4 },
{ x: "01:21:20", y: 1 },
{ x: "02:12:00", y: 4 },
{ x: "03:00:00", y: 1 },
{ x: "04:00:00", y: 6 },
{ x: "05:00:00", y: 5 },
{ x: "06:00:00", y: 5 },
{ x: "07:00:00", y: 3 },
{ x: "08:00:00", y: 8 },
{ x: "09:00:00", y: 9 },
{ x: "10:00:00", y: 1 },
{ x: "11:00:00", y: 2 },
{ x: "12:00:00", y: 1.6 },
{ x: "13:00:00", y: 2.6 },
{ x: "14:00:00", y: 5.4 },
{ x: "15:00:00", y: 7.6 },
{ x: "16:00:00", y: 1.6 },
{ x: "16:01:00", y: 2.6 },
{ x: "16:20:00", y: 1.1 },
{ x: "17:00:00", y: 2.3 },
{ x: "18:00:00", y: 1.9 },
{ x: "19:00:00", y: 0.7 },
{ x: "20:00:00", y: 6 },
{ x: "21:00:00", y: 8 },
{ x: "22:00:00", y: 9 },
{ x: "23:00:00", y: 3.5 },
];
let montlyTotals = [
{ x: "00:01", y: 9 },
{ x: "01:00", y: 8 },
{ x: "02:00", y: 5 },
{ x: "03:00", y: 2.5 },
{ x: "04:00", y: 1.7 },
{ x: "05:00", y: 9.3 },
{ x: "06:00", y: 2.4 },
{ x: "07:00", y: 4.3 },
{ x: "08:00", y: 5.4 },
{ x: "09:00", y: 7.6 },
{ x: "10:00", y: 6.3 },
{ x: "11:00", y: 1.3 },
{ x: "12:00", y: 2.6 },
{ x: "13:00", y: 4.3 },
{ x: "14:00", y: 2.1 },
{ x: "15:00", y: 1.6 },
{ x: "16:00", y: 6 },
{ x: "17:00", y: 4 },
{ x: "18:00", y: 1 },
{ x: "19:00", y: 4.2 },
{ x: "20:00", y: 6.32 },
{ x: "21:00", y: 8.2 },
{ x: "22:00", y: 2.5 },
{ x: "23:00", y: 1.1 },
];
let yourData = {
datasets: [
{
type: "line",
label: "Daily Generation",
data: usageData,
borderColor: "rgba(0,0,255,1)",
xAxisID: "daily-x-axis",
yAxisID: "daily-y-axis",
},
{
type: "line",
label: "Monthly Totals",
data: montlyTotals,
borderColor: "rgba(255,0,0,0.5)",
backgroundColor: "rgba(255,0,0,0.5)",
xAxisID: "monthly-x-axis",
yAxisID: "monthly-y-axis",
},
],
};
const yourOptions = {
responsive: true,
plugins: {
legend: {
position: "top" as const,
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
options: {
scales: {
"daily-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
day: "MMM DD, YYYY",
month: "MMM",
},
tooltipFormat: "dddd, MMM DD, YYYY",
},
ticks: {
minRotation: 80,
maxRotation: 90,
color: "blue",
},
position: "bottom",
},
"monthly-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
day: "MMM DD, YYYY",
month: "MMM",
},
tooltipFormat: "MMM, YYYY",
},
ticks: {
color: "green",
},
position: "bottom",
},
"daily-y-axis": {
position: "left",
title: {
display: true,
text: "kWh / day",
color: "blue",
},
ticks: {
color: "blue",
},
},
"monthly-y-axis": {
position: "right",
title: {
display: true,
text: "total kWh / month",
color: "green",
},
ticks: {
color: "green",
},
},
},
},
};

AFA I see, there is a bug in the chart configuration. The options node it's wrong and it must be removed. This is the reason of the bug and why the scales are not what your are defining (see missing colors and correct position in your picture) and is using the defaults (linear ones).
let dailyGeneration = [
{ x: "00:01:00", y: 1 },
{ x: "00:10:00", y: 8 },
{ x: "00:16:00", y: 9 },
{ x: "00:21:00", y: 4 },
{ x: "00:53:00", y: 8 },
{ x: "01:01:00", y: 2 },
{ x: "01:03:10", y: 5 },
{ x: "01:11:01", y: 4 },
{ x: "01:21:20", y: 1 },
{ x: "02:12:00", y: 4 },
{ x: "03:00:00", y: 1 },
{ x: "04:00:00", y: 6 },
{ x: "05:00:00", y: 5 },
{ x: "06:00:00", y: 5 },
{ x: "07:00:00", y: 3 },
{ x: "08:00:00", y: 8 },
{ x: "09:00:00", y: 9 },
{ x: "10:00:00", y: 1 },
{ x: "11:00:00", y: 2 },
{ x: "12:00:00", y: 1.6 },
{ x: "13:00:00", y: 2.6 },
{ x: "14:00:00", y: 5.4 },
{ x: "15:00:00", y: 7.6 },
{ x: "16:00:00", y: 1.6 },
{ x: "16:01:00", y: 2.6 },
{ x: "16:20:00", y: 1.1 },
{ x: "17:00:00", y: 2.3 },
{ x: "18:00:00", y: 1.9 },
{ x: "19:00:00", y: 0.7 },
{ x: "20:00:00", y: 6 },
{ x: "21:00:00", y: 8 },
{ x: "22:00:00", y: 9 },
{ x: "23:00:00", y: 3.5 },
];
let montlyTotals = [
{ x: "00:01", y: 9 },
{ x: "01:00", y: 8 },
{ x: "02:00", y: 5 },
{ x: "03:00", y: 2.5 },
{ x: "04:00", y: 1.7 },
{ x: "05:00", y: 9.3 },
{ x: "06:00", y: 2.4 },
{ x: "07:00", y: 4.3 },
{ x: "08:00", y: 5.4 },
{ x: "09:00", y: 7.6 },
{ x: "10:00", y: 6.3 },
{ x: "11:00", y: 1.3 },
{ x: "12:00", y: 2.6 },
{ x: "13:00", y: 4.3 },
{ x: "14:00", y: 2.1 },
{ x: "15:00", y: 1.6 },
{ x: "16:00", y: 6 },
{ x: "17:00", y: 4 },
{ x: "18:00", y: 1 },
{ x: "19:00", y: 4.2 },
{ x: "20:00", y: 6.32 },
{ x: "21:00", y: 8.2 },
{ x: "22:00", y: 2.5 },
{ x: "23:00", y: 1.1 },
];
let dsMonthly = {
type: "line",
label: "Monthly Totals",
data: montlyTotals,
borderColor: "rgba(255,0,0,0.5)",
backgroundColor: "rgba(255,0,0,0.5)",
xAxisID: "monthly-x-axis",
yAxisID: "monthly-y-axis",
};
let yourData = {
datasets: [
{
type: "line",
label: "Daily Generation",
data: dailyGeneration,
borderColor: "rgba(0,0,255,1)",
xAxisID: "daily-x-axis",
yAxisID: "daily-y-axis",
}
],
};
const yourOptions = {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
scales: {
"daily-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
hour: "HH:mm",
},
tooltipFormat: "dddd, MMM DD, YYYY",
},
ticks: {
minRotation: 80,
maxRotation: 90,
color: "blue",
},
position: "bottom",
},
"monthly-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
hour: "HH:mm"
},
tooltipFormat: "MMM, YYYY",
},
ticks: {
color: "green",
},
position: "bottom",
},
"daily-y-axis": {
position: "left",
title: {
display: true,
text: "kWh / day",
color: "blue",
},
ticks: {
color: "blue",
},
},
"monthly-y-axis": {
position: "right",
title: {
display: true,
text: "total kWh / month",
color: "green",
},
ticks: {
color: "green",
},
},
},
};
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: 'line',
data: yourData,
options: yourOptions
});
document.getElementById('month').addEventListener('click', function() {
myChart.data.datasets.push(dsMonthly);
myChart.update();
document.getElementById('month').disabled = true;
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#3.0.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#1.2.0/dist/chartjs-adapter-luxon.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
<button id="month">Add month dataset</button>
</body>
</html>

Make a CanvasJS Chart using JSON data

I need to make this coding in a way where I can show JSON data in graph. but I don't know how to convert this coding in a way so that this graph will show JSON data. I am posting coding in here for your convenience.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "dark2",
title:{
text: "MOVEMENT CATEGORY"
},
subtitles:[
{
text: "(STANDSTILL, ON FOOT or ON VEHICLE)",
},],
axisX:{
title: "TIME SLOT"
},
axisY:{
title:"Number of users(%)",
suffix: "%"
},
toolTip:
{
shared: true
},
data: [{
type: "stackedArea100",
name: "STANDSTILL",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 83, label: "6am - 10am" },
{ y: 51, label: "10am - 4pm" },
{ y: 64, label: "4pm - 8pm" },
{ y: 71, label: "8pm - 12am" },
{ y: 45, label: "12am - 6am" }
]
},
{
type: "stackedArea100",
name: "ON FOOT",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 20 , label: "6am - 10am" },
{ y: 30, label: "10am - 4pm" },
{ y: 24, label: "4pm - 8pm" },
{ y: 38, label: "8pm - 12am" },
{ y: 51, label: "12am - 6am" }
]
},
{
type: "stackedArea100",
name: "ON VEHICLE",
showInLegend: "true",
yValueFormatString: "#,##0.##\"%\"",
dataPoints: [
{ y: 11, label: "6am - 10am" },
{ y: 61, label: "10am - 4pm" },
{ y: 50, label: "4pm - 8pm" },
{ y: 23, label: "8pm - 12am" },
{ y: 31, label: "12am - 6am" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Highcharts dual y-axis labeling

I need to have labels in both y-axis of this graph. I managed the one on the left (Million Tonnes) but I can't figure out the one on the left. Right now it says Value but it should say Recycling Rate (%). The idea of course is that it displays in the way as Million Tonnes. In other words, the same alignment. TIA
You can see the code here:
Highcharts.chart('container', {
chart: {
events: {
load: function() {
var label = this.renderer.label("SOURCE: CEPI")
.css({
width: '600px',
fontSize: '1em',
color: '#414042'
})
.attr({
'stroke': 'silver',
'stroke-width': 0,
'r': 2,
'padding': -15
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 30, // offset
verticalAlign: 'bottom',
y: 0 // offset
}), null, 'spacingBox');
}
},
marginBottom: 90
},
title: {
text: 'European Recycling Rate of Paper for Recycling',
style: {
fontSize: '2.5em'
}
},
subtitle: {
text: 'CEPI Statistics - Status as of 2015'
},
xAxis: {
categories: ['1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
gridLineWidth: 1,
tickLength: 0
},
yAxis: [{
title: {
text: ''
}
}, {
opposite: true,
linkedTo: 0
}],
series: [{
type: 'column',
color: '#8cc640',
name: 'Paper & Board Consumption',
data: [64.801, 65.576, 65.863, 70.939, 70.937, 71.124, 76.629, 79.788, 82.228, 86.826, 83.878, 84.895, 86.673, 88.918, 89.903, 91.916, 93.165, 90.209, 80.996, 84.873, 83.496, 81.280, 80.161, 81.288, 82.484]
}, {
type: 'column',
color: '#6cbd56',
name: 'Recycling inside Europe',
data: [26.641, 27.781, 28.611, 31.823, 33.359, 34.597, 36.960, 38.906, 40.544, 43.174, 43.658, 44.800, 45.730, 47.641, 49.011, 50.731, 51.504, 50.184, 46.149, 49.800, 49.108, 48.420, 49.287, 49.511, 49.583]
}, {
type: 'column',
color: '#009347',
name: 'Recycling Outside Europe',
data: [-0.512, -1.038, -0.598, -0.662, -0.319, 0.358, 0.725, 1.109, 2.339, 1.779, 2.347, 2.436, 3.029, 4.655, 6.587, 7.306, 8.535, 9.853, 12.058, 8.371, 9.406, 9.446, 8.319, 8.561, 9.384]
}, {
name: 'Recycling Rate',
color: '#2f7cba',
data: [40.3, 40.8, 42.5, 43.9, 46.6, 49.1, 49.2, 50.2, 52.2, 51.8, 54.8, 55.6, 56.3, 58.8, 61.8, 63.1, 64.4, 66.6, 71.9, 68.5, 70.1, 71.2, 71.9, 71.4, 71.5],
marker: {
lineWidth: 1,
lineColor: '#2f7cba'
}
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Put title for each axis
yAxis: [{
title: {
text: 'Million Tonnes'
}
}, {
opposite: true,
linkedTo: 0,
title: {
text: 'Recycling Rate (%)'
}
}],
Highcharts.chart('container', {
chart: {
events: {
load: function() {
var label = this.renderer.label("SOURCE: CEPI")
.css({
width: '600px',
fontSize: '1em',
color: '#414042'
})
.attr({
'stroke': 'silver',
'stroke-width': 0,
'r': 2,
'padding': -15
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 30, // offset
verticalAlign: 'bottom',
y: 0 // offset
}), null, 'spacingBox');
}
},
marginBottom: 90
},
title: {
text: 'European Recycling Rate of Paper for Recycling',
style: {
fontSize: '2.5em'
}
},
subtitle: {
text: 'CEPI Statistics - Status as of 2015'
},
xAxis: {
categories: ['1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
gridLineWidth: 1,
tickLength: 0
},
yAxis: [{
title: {
text: 'Million Tonnes'
}
}, {
opposite: true,
linkedTo: 0,
title: {
text: 'Recycling Rate (%)'
}
}],
series: [{
type: 'column',
color: '#8cc640',
name: 'Paper & Board Consumption',
data: [64.801, 65.576, 65.863, 70.939, 70.937, 71.124, 76.629, 79.788, 82.228, 86.826, 83.878, 84.895, 86.673, 88.918, 89.903, 91.916, 93.165, 90.209, 80.996, 84.873, 83.496, 81.280, 80.161, 81.288, 82.484]
}, {
type: 'column',
color: '#6cbd56',
name: 'Recycling inside Europe',
data: [26.641, 27.781, 28.611, 31.823, 33.359, 34.597, 36.960, 38.906, 40.544, 43.174, 43.658, 44.800, 45.730, 47.641, 49.011, 50.731, 51.504, 50.184, 46.149, 49.800, 49.108, 48.420, 49.287, 49.511, 49.583]
}, {
type: 'column',
color: '#009347',
name: 'Recycling Outside Europe',
data: [-0.512, -1.038, -0.598, -0.662, -0.319, 0.358, 0.725, 1.109, 2.339, 1.779, 2.347, 2.436, 3.029, 4.655, 6.587, 7.306, 8.535, 9.853, 12.058, 8.371, 9.406, 9.446, 8.319, 8.561, 9.384]
}, {
name: 'Recycling Rate',
color: '#2f7cba',
data: [40.3, 40.8, 42.5, 43.9, 46.6, 49.1, 49.2, 50.2, 52.2, 51.8, 54.8, 55.6, 56.3, 58.8, 61.8, 63.1, 64.4, 66.6, 71.9, 68.5, 70.1, 71.2, 71.9, 71.4, 71.5],
marker: {
lineWidth: 1,
lineColor: '#2f7cba'
}
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

How to show only first and last labels in CanvasJS

I need to show first and last labels only in CanvasJS. It's always showing all the labels but my requirement is to show only first and last. Is there any way out to do so?

You can use axisY labelFormatter to do so.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisY: {
tickColor: "transparent",
labelFormatter: function(e){
if(e.chart.axisY[0].minimum === e.value || e.chart.axisY[0].maximum === e.value)
return e.value;
return "";
}
},
data: [{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

You can also try hiding all axis-labels and add stripLines at the minimum and maximum.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisX: {
valueFormatString: "####"
},
axisY:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
axisY2:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
data: [
{
type: "column",
showInLegend: true,
name: "Axis Y-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 6 },
{ x: 2007, y: 2 },
{ x: 2008, y: 5 },
{ x: 2009, y: 7 },
{ x: 2010, y: 1 },
{ x: 2011, y: 5 },
{ x: 2012, y: 5 },
{ x: 2013, y: 2 },
{ x: 2014, y: 2 }
]
},
{
type: "column",
showInLegend: true,
axisYType: "secondary",
//axisYIndex: 0, //Defaults to Zero
name: "Axis Y2-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 12 },
{ x: 2007, y: 20 },
{ x: 2008, y: 28 },
{ x: 2009, y: 34 },
{ x: 2010, y: 24 },
{ x: 2011, y: 45 },
{ x: 2012, y: 15 },
{ x: 2013, y: 34 },
{ x: 2014, y: 22 }
]
}
]
});
chart.render();
addStripLine(chart);
function addStripLine(chart){
for(var i = 0; i < chart.axisY.length; i++){
min = chart.axisY[i].get("minimum");
max = chart.axisY[i].get("maximum");
chart.axisY[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
for(var i = 0; i < chart.axisY2.length; i++){
min = chart.axisY2[i].get("minimum");
max = chart.axisY2[i].get("maximum");
chart.axisY2[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY2[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

Changing the x-label in HTML Canvas charts

Hi I am using HTML Canvas charts. In one of the charts can I change the label of x-axis?
The source code for the chart is :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
theme: "theme2",
title:{
text: "Multi Series Spline Chart - Hide / Unhide via Legend"
},
axisY:[{
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
titleFontColor: "#4F81BC",
lineThickness: 2,
},
{
lineColor: "#C0504E",
tickColor: "#C0504E",
labelFontColor: "#C0504E",
titleFontColor: "#C0504E",
lineThickness: 2,
}],
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
dataPoints: [
{ x: 10, y: 51 },
{ x: 20, y: 45},
{ x: 30, y: 50 },
{ x: 40, y: 62 },
{ x: 50, y: 95 },
{ x: 60, y: 66 },
{ x: 70, y: 24 },
{ x: 80, y: 32 },
{ x: 90, y: 16}
]
},
{
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: 10, y: 201 },
{ x: 20, y: 404},
{ x: 30, y: 305 },
{ x: 40, y: 405 },
{ x: 50, y: 905 },
{ x: 60, y: 508 },
{ x: 70, y: 108 },
{ x: 80, y: 300 },
{ x: 90, y: 101}
]
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
});
</script>
</body>
</html>
Now here we can see that x-values is 10,20,30... My question is can we change them to other format like 10am or 10pm?

You can add a suffix (or a prefix) to the x-axis with chart.options.axisX
chart.options.axisX = { suffix: "AM" };
Or you can add both like this:
chart.options.axisX = { prefix: "/", suffix: "AM" };

Categories

Resources