How to show only first and last labels in CanvasJS - javascript

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>

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>

create filled linear chart with chartjs for specific datasets

I'm trying to create a linear chart like a curve for different datasets but with start and end range for the x and y.
I want the start and end point of each dataset start from x y, how can convert the y line as values but takes labels? I tried to do something similar on the codepen but still need more to be similar to the image.
var data = {
labels: ["Group A", "Group B", "Group C", "Group D", "Group E"],
datasets: [
{
label: "Group A",
backgroundColor: gradient,
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "#911215",
data: [
{ x: 0, y: 0 },
{ x: 5, y: 5 }
]
},
{
label: "Group B",
backgroundColor: "green",
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "green",
data: [
{ x: 0, y: 0 },
{ x: 5, y: 5 },
{ x: 10, y: 10 }
]
},
{
label: "Group C",
backgroundColor: gradient,
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "#911215",
data: [
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 10, y: 10 },
{ x: 60, y: 60 },
{ x: 60, y: 10 }
]
},
{
label: "Group D",
backgroundColor: "blue",
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "blue",
data: [
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 60, y: 10 },
{ x: 0, y: 5 }
]
},
{
label: "Group E",
backgroundColor: "pink",
pointBackgroundColor: "white",
borderWidth: 1,
borderColor: "pink",
data: [
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 0 },
{ x: 0, y: 10 },
{ x: 0, y: 0 },
{ x: 0, y: 0 }
]
}
]
};
codepen

How to create chart bar with lines in jQuery

I want create some Chart Bar + line, but i dont know how to combine two chart.
I wannt make Like this pic Bar
Thanks, Hope someone can Help my problem

How about this one https://jsfiddle.net/nu7cx100/
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "Grafik Riwayat PKPT"
},
axisX:{
valueFormatString: "####",
interval: 1
},
axisY:[{
title: "Linear Scale",
lineColor: "#369EAD",
titleFontColor: "#369EAD",
labelFontColor: "#369EAD"
}],
axisY2:[{
title: "Linear Scale",
lineColor: "#7F6084",
titleFontColor: "#7F6084",
labelFontColor: "#7F6084"
}],
data: [
{
type: "column",
showInLegend: true,
//axisYIndex: 0, //Defaults to Zero
name: "ANNGGARAN",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 60 },
{ x: 2007, y: 20 },
{ x: 2008, y: 50 },
{ x: 2009, y: 70 },
{ x: 2010, y: 10 },
{ x: 2011, y: 50 },
{ x: 2012, y: 50 },
{ x: 2013, y: 20 },
{ x: 2014, y: 20 }
]
},
{
type: "line",
showInLegend: true,
axisYIndex: 1, //Defaults to Zero
name: "KEGIATAN",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 15 },
{ x: 2007, y: 3 },
{ x: 2008, y: 20 },
{ x: 2009, y: 10 },
{ x: 2010, y: 15 },
{ x: 2011, y: 10 },
{ x: 2012, y: 20 },
{ x: 2013, y: 20 },
{ x: 2014, y: 2 }
]
}
]
});
chart.render();
}
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
It uses canvasjs
Hope this helps

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" };

Canvas.js not showing all label

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
}

Categories

Resources