Related
Hi here's a canvas i am using as abackground for a card
just want it static without hover,tooltip or label or any legends just the line chart with its background colour as a static chart.
if anyone can help with options{ apt to disable all of these.you'll be a legedn
thank you
<canvas class = "w-100" id="myChartfill" >
<script>
chartData4 =
{
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
data: [10, 59, 80, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgb(75, 192, 192)',
tension: 0.1,
}]
}
;
const myChartfill = document.getElementById('myChartfill');
if(myChartfill!=null){
new Chart(myChartfill, {
type: 'line',
data: chartData4,
options: {
}
}
)}
</script>
</canvas>
Use the script outside the canvas
chartData4 =
{ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
data: [10, 59, 80, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgb(75, 192, 192)',
tension: 0.1,
}]
};
const myChartfill = document.getElementById('myChartfill');
if(myChartfill!=null){
new Chart(myChartfill, {
type: 'line',
data: chartData4,
options: {
events: [],
plugins: { tooltip: { enabled: false} ,
legend: {
display: false},
},
scales: {
y: {
ticks: {
display: false,
},
grid: {
display: false,
},
},
x: {
ticks: {
display: false,
},
grid: {
display: false,
},
},
},
},
)}
.container {
display: flex;
width: 100%;
height: 50vh;
}
<div class="container">
<canvas class = "w-100" id="myChartfill"></canvas>
</div>
options: {
tooltips: {
enabled: false,
},
legend: {
display: false
},
scales: {
xAxes: [{display: false}],
yAxes: [{display: false}],
}
}
I want to draw a chart with 4 lines, with filling between 2 specific lines named Max and Min. The library I'm using is Javascript Chartjs.
I have read the chart area doc (https://www.chartjs.org/docs/latest/charts/area.html) and this answer https://stackoverflow.com/a/45398867/10250051
However, the graph still fills the whole area under the Max line instead of stopping at the min line.
$(document).ready(function(){
var ctx = document.getElementById('mixed-api').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1,2,3,4,5,6,7],
datasets: [
{
label: 'Median',
data: [20, 20, 20, 20, 20, 20, 20],
fill: false,
borderColor: 'rgb(0, 0, 0)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Min',
data: [10, 10, 10, 10, 10, 10, 10],
fill: false,
borderColor: 'red',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Max',
data: [30, 30, 30, 30, 30, 30, 30],
fill: '-1',
borderColor: 'red',
tension: 0.1,
backgroundColor: 'rgba(255,193,8,0.5)'
},
{
label: 'Random',
data: [5, 10, 15, 20, 25, 30, 35],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Energy (kW)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
pointLabels: {
fontStyle: 'bold',
},
plugins: {
filler: {
propagate: false
}
},
}
}
});
});
Wrong graph
Your code is working fine, only thing I can think of is that you are using an outdated version of the lib, with the latest V2 (2.9.4) release and V3 release its working as intended, see examples:
V2.9.4
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [
{
label: 'Median',
data: [20, 20, 20, 20, 20, 20, 20],
fill: false,
borderColor: 'rgb(0, 0, 0)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Min',
data: [10, 10, 10, 10, 10, 10, 10],
fill: false,
borderColor: 'red',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Max',
data: [30, 30, 30, 30, 30, 30, 30],
fill: '-1',
borderColor: 'red',
tension: 0.1,
backgroundColor: 'rgba(255,193,8,0.5)'
},
{
label: 'Random',
data: [5, 10, 15, 20, 25, 30, 35],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Energy (kW)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
pointLabels: {
fontStyle: 'bold',
},
plugins: {
filler: {
propagate: false
}
},
}
}
});
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
V3:
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [
{
label: 'Median',
data: [20, 20, 20, 20, 20, 20, 20],
fill: false,
borderColor: 'rgb(0, 0, 0)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Min',
data: [10, 10, 10, 10, 10, 10, 10],
fill: false,
borderColor: 'red',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Max',
data: [30, 30, 30, 30, 30, 30, 30],
fill: '-1',
borderColor: 'red',
tension: 0.1,
backgroundColor: 'rgba(255,193,8,0.5)'
},
{
label: 'Random',
data: [5, 10, 15, 20, 25, 30, 35],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
}
]
},
options: {
scales: {
y: {
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Energy (kW)'
}
},
x: {
scaleLabel: {
display: true,
labelString: 'Time'
}
},
},
pointLabels: {
fontStyle: 'bold',
},
plugins: {
filler: {
propagate: false
}
},
}
});
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js" integrity="sha512-LlFvdZpYhQdASf4aZfSpmyHD6+waYVfJRwfJrBgki7/Uh+TXMLFYcKMRim65+o3lFsfk20vrK9sJDute7BUAUw==" crossorigin="anonymous"></script>
</body>
I am trying to reference data from a user input in Javascript. The variable is passed in as JSON and I need to extract one value and reference this inside another JSON that creates a chart using Chart JS. The line labels is what I have tried but it does not seem to work. I am trying to avoid refactoring where possible. Any suggestions?
{
"labels": "['jan', 'Feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']"
}
var lineChart = document.getElementById('line-chart').getContext('2d');
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: JSON.parse(document.getElementById('ctl00_ctl00_cphMain_cphMacTool_DASHBOARD').value).labels,
datasets: [{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Processed",
borderColor: "#9C2AA0",
fill: false
},
{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Error",
borderColor: "#123456",
fill: false
},
{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Not Processed",
borderColor: "#A8B400",
fill: false
}
]
},
options: {
title: {
display: false,
text: '',
fontColor: '#000000',
fontFamily: 'Calibri',
fontSize: 30
},
legend: {
position: 'top',
labels: {
fontColor: '#000000',
fontFamily: 'Calibri',
boxWidth: 20,
fontSize: 20
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#000000'
}
}],
yAxes: [{
ticks: {
fontColor: '#000000'
}
}]
}
}
});
There are two problems in your code.
As others already commented, the data in your input element is not of valid JSON format
labels itself is a string since it is surrounded by double quotes
To make it work, you can perform the following steps.
parse the value from the input string with JSON.parse and extract labels (that's what you already did).
replace all single quotes by double quotes in the obtained labels string.
parse the labels string to a JSON array using again JSON.parse.
const labelsAsString = JSON.parse(document.getElementById('ctl00_ctl00_cphMain_cphMacTool_DASHBOARD').value).labels;
const labelsAsJSONString = labelsAsString.replace(/'/g,'"');
const labelsArray = JSON.parse(labelsAsJSONString);
Please have a look at your amended code below and see how it works.
const labelsAsString = JSON.parse(document.getElementById('ctl00_ctl00_cphMain_cphMacTool_DASHBOARD').value).labels;
const labelsAsJSONString = labelsAsString.replace(/'/g,'"');
const labelsArray = JSON.parse(labelsAsJSONString);
new Chart('line-chart', {
type: 'line',
data: {
labels: labelsArray,
datasets: [{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Processed",
borderColor: "#9C2AA0",
fill: false
},
{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Error",
borderColor: "#123456",
fill: false
},
{
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200],
label: "Not Processed",
borderColor: "#A8B400",
fill: false
}
]
},
options: {
title: {
display: false,
text: '',
fontColor: '#000000',
fontFamily: 'Calibri',
fontSize: 30
},
legend: {
position: 'top',
labels: {
fontColor: '#000000',
fontFamily: 'Calibri',
boxWidth: 20,
fontSize: 20
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#000000'
}
}],
yAxes: [{
ticks: {
fontColor: '#000000'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<input id="ctl00_ctl00_cphMain_cphMacTool_DASHBOARD" value="{ "labels": "['jan', 'Feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']" }">
<canvas id="line-chart" height="80"></canvas>
The JSON I posted was valid but when parsed, returned a string. As uminder mentioned, labels needs to be an array hence replacing single quotes with double quotes and parsing twice returns an object. This worked! Really appreciate the help.
If I add two Y-Axes to an Apexchart it is pushed beyond the wrapper and does not resize properly.
I would like to have one Y-Axis displayed on the left side of the chart and the other one on the right side of the chart.
I tried to debug it in my dev tools but I am sure that this is a canvas problem itself.
I provided the snippet below which shows how the left Y-Axis and Jan data are out of scope.
var yearMapOptions = {
chart: {
fontFamily: "'Varela Round', sans-serif",
foreColor: '#2e1a6d',
toolbar: {
show: false
},
height: "100%",
stacked: false
},
colors: ['#2e1a6d', '#47bfb6', '#f37b94', '#ebf394'],
dataLabels: {
enabled: false
},
series: [{
name: 'Net Pips',
type: 'line',
data: [-10, 17, 39, -4, 63, -27, 55, 290, -83, 26, -45, 17],
}, {
name: 'Net Profit',
type: 'line',
data: [-35, 45, 190, -70, -50, 36, -80, 59, -29, 62, -65, 70]
}, {
name: 'Total Volume',
type: 'column',
data: [20, 60, 35, 57, 330, 30, 660, 58, 58, 230, 70, 120]
}, {
name: 'Total Trades',
type: 'column',
data: [6, 23, 11, 8, 33, 4, 57, 13, 13, 45, 17, 28]
}],
stroke: {
width: [3, 3, 3, 3],
curve: 'smooth'
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'August', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yaxis: [{
show: true,
seriesName: 'Net Pips',
opposite: true,
tickAmount: 2,
forceNiceScale: true,
axisTicks: {
show: false,
},
axisBorder: {
show: true,
color: '#00E396'
},
axisTicks: {
show: false,
borderType: 'solid',
color: '#47bfb6',
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: undefined,
style: {
color: '#00E396',
}
},
}, {
show: true,
seriesName: 'Net Profit',
opposite: false,
tickAmount: 2,
forceNiceScale: true,
axisTicks: {
show: true,
borderType: 'solid',
color: '#2e1a6d',
},
axisBorder: {
show: true,
color: '#FEB019'
},
labels: {
style: {
color: '#FEB019',
},
},
title: {
text: undefined,
style: {
color: '#FEB019',
}
},
}
],
plotOptions: {
bar: {
horizontal: false,
endingShape: 'rounded',
barheight: '100%'
}
},
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
grid: {
show: false
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetY: 10
}
};
var yearMapChart = new ApexCharts(
document.querySelector("#yearMap"),
yearMapOptions
);
yearMapChart.render();
.apexcharts-yaxis, .apexcharts-xaxis-label {
font-weight: bold;
}
.yearMapWrapper {
height: 100%;
width: 80%;
margin-left: 10%;
}
<html>
<body>
<div class="rowFiveCol2 layerStyles">
<div class="yearMapWrapper">
<div id="yearMap"></div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<html>
Removing grid: { show: false } makes the y-axis visible.
PS: Changing grid behavior should not affect the y-axis. It seems like a bug in ApexCharts which will be addressed soon.
I have created a stacked bar chart and i have to hide first dataset's label and its box in legend which is "Total Line", Is there anyway to hide first or any dataset's label. i have read the documentation there is a filter in options but it didn't work.
Hiding This label
Here is the html and js for chart
var ctx = document.getElementById("girth-measure-chart");
var totalLine = [115, 118, 88, 93, 103, 118, 125]
var total = [112, 115, 85, 90, 100, 115, 122]
var arms = [46, 55, 41, 41, 47, 54, 57]
var neck = [17, 20, 15, 15, 17, 20, 21]
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
datasets: [{
type: 'line',
label: 'Total Line',
data: totalLine,
fill: false,
borderColor: ["#ff7899"],
legend: false,
pointBackgroundColor: "#ff151f",
pointRadius: 8,
pointHoverRadius: 8,
pointHoverBackgroundColor: "#990e14",
pointHoverBorderColor: "#6754d3"
}, {
type: 'bar',
label: 'Neck',
data: neck,
backgroundColor: "#e99449",
hoverBackgroundColor: "#d36d14"
}, {
type: 'bar',
label: 'Arms',
data: arms,
backgroundColor: "#49bae9",
hoverBackgroundColor: "#0789bf"
}, {
type: 'bar',
label: 'Total',
data: total,
backgroundColor: "#6754d3",
hoverBackgroundColor: "#260cbd"
}
]
},
options: {
legend: {
display: true,
labels: {
display: true,
boxWidth: 12,
}
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false
},
barThickness: 25,
ticks: {
display: true,
fontFamily: "Montserrat",
fontColor: "#2c405a",
fontSize: 12
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
display: false,
stepSize: 10,
min: 0,
max: 150,
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
<div class="girth-measure-chart-inner" style="width: 100%;">
<canvas id="girth-measure-chart" height=""></canvas>
</div>
</div>
Use the filter method under options.
options: {
legend: {
labels: {
filter: function(legendItem, chartData) {
// return true or false based on legendItem's datasetIndex (legendItem.datasetIndex)
}
}
}
}
In your case return false for the first index and true for the rest.
var ctx = document.getElementById("girth-measure-chart");
var totalLine = [115, 118, 88, 93, 103, 118, 125]
var total = [112, 115, 85, 90, 100, 115, 122]
var arms = [46, 55, 41, 41, 47, 54, 57]
var neck = [17, 20, 15, 15, 17, 20, 21]
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
datasets: [{
type: 'line',
label: 'Total Line',
data: totalLine,
fill: false,
borderColor: ["#ff7899"],
legend: false,
pointBackgroundColor: "#ff151f",
pointRadius: 8,
pointHoverRadius: 8,
pointHoverBackgroundColor: "#990e14",
pointHoverBorderColor: "#6754d3"
}, {
type: 'bar',
label: 'Neck',
data: neck,
backgroundColor: "#e99449",
hoverBackgroundColor: "#d36d14"
}, {
type: 'bar',
label: 'Arms',
data: arms,
backgroundColor: "#49bae9",
hoverBackgroundColor: "#0789bf"
}, {
type: 'bar',
label: 'Total',
data: total,
backgroundColor: "#6754d3",
hoverBackgroundColor: "#260cbd"
}
]
},
options: {
legend: {
labels: {
filter: function(legendItem, chartData) {
if (legendItem.datasetIndex === 0) {
return false;
}
return true;
}
}
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false
},
barThickness: 25,
ticks: {
display: true,
fontFamily: "Montserrat",
fontColor: "#2c405a",
fontSize: 12
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
display: false,
stepSize: 10,
min: 0,
max: 150,
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
<div class="girth-measure-chart-inner" style="width: 100%;">
<canvas id="girth-measure-chart" height=""></canvas>
</div>
</div>