I have a Canvas JS chart and if the values are 0, I'd like to hide the labels. 2 of my datapoints are non-zero. My JavaScript is:
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: ""
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type: "pie",
showInLegend: true,
toolTipContent: "${y} - #percent %",
dataPoints: [
{ y: debt, indexLabel: "Debt Payments" },
{ y: housing, indexLabel: "Housing" },
{ y: utilities, indexLabel: "Utilities" },
{ y: foodandsupplies, indexLabel: "Food and Supplies"},
{ y: transportation, indexLabel: "Transportation" },
{ y: health, indexLabel: "Health"},
{ y: otherDebts, indexLabel: "Other payments"}
]
}
]
});
chart.render();
The outcome of the JavaScript is:
Pie Chart
I would appreciate any help with this. Thanks!
You can hide the indexLabels for dataPoints with zero as y values by going through the chart options and setting the indexLabel as empty string for all such dataPoints.
Add this code snippet before rendering the chart i.e. chart.render() and it should work fine.
for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
if(chart.options.data[0].dataPoints[i].y === 0)
chart.options.data[0].dataPoints[i].indexLabel = "";
}
Hope it helps.
Related
I have bellow Code to display a Chart using Chart.js.
<canvas id="canvasline" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById('canvasline').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['0', '30', '50'],
datasets: [{
data: [
{ x: "0", y: 0 },
{ x: "10", y: 10 },
{ x: "20", y: 20 },
{ x: "30", y: 30 },
{ x: "40", y: 40 },
{ x: "50", y: 50 },
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: true,
suggestedMin: 0,
suggestedMax: 100,
maxTicksLimit: 10
},
gridLines: {
display: true
}
}],
xAxes: [{
ticks: {
display: true,
suggestedMin: 0,
suggestedMax: 100,
maxTicksLimit: 3
},
gridLines: {
display: true
}
}]
}
}
});
</script>
Working Code Example:
https://jsfiddle.net/2vcrsq6n/
I am facing the below issues:
For the X-Axis label "30", I see X data "10" is getting displayed
At the runtime I get an JSON array with X and Y values as an array, I want to plot this X and Y numbers on the graph how should I implement it.
When the data is specified as individual points through objects that contain an x and an y property, you should not define data.labels.
Also make sure, the x and y values are numbers but not strings.
Please take a look at your amended code below that uses the most recent stable version of Chart.js (2.9.3).
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [
{ x: 0, y: 0 },
{ x: 10, y: 10 },
{ x: 20, y: 20 },
{ x: 30, y: 30 },
{ x: 40, y: 40 },
{ x: 50, y: 50 }
],
showLine: true,
fill: false,
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 100,
maxTicksLimit: 10
}
}],
xAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 100,
maxTicksLimit: 3
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
To update your chart with new data, simply add or replace the data in the dataset and invoke chart.update() afterwards.
myChart.data.datasets[0].data = <new data>;
myChart.update();
I have a canvasjs line chart with an X and Y axis.
In canvasjs the interval on the Y axis is calculated automatically, unless I specify.
How do I remove it? I do not want the interval lines showing.
Example:
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Simple Line Chart"
},
axisY:{
interval: 10 < I want to hide this
},
data: [{
type: "line",
dataPoints: [
{ y: 450 },
{ y: 414 },
{ y: 510 }
]
}]
});
chart.render();
You can hide grids and ticks by setting gridThickness and tickLength to 0 respectively. If you like to hide axis labels along with removing grids and tick, you can use labelFormatter. Below is the working code, which hides grids, ticks and labels over axisY:
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Simple Line Chart"
},
axisY:{
gridThickness: 0,
tickLength: 0,
labelFormatter: function(e) {
return "";
}
},
data: [{
type: "line",
dataPoints: [
{ y: 450 },
{ y: 414 },
{ y: 510 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="width: 100%; height: 200px"></div>
I'm using chartjs lib to draw charts.
And I want to draw some simple, linear chart, but when do it some how the first point of the chart isn't shown correctly :
https://scr.hu/ALkPXP
It happends when the lowest data point x value have the same value as the minimum xAxes.
When I decrease minimum ax value it works correcty:
https://scr.hu/Gw4Lpy
My whole chart looks like :
const scatterChart2 = new Chart(this.canvas.nativeElement,
{
'type': 'line',
'data':
{
'datasets': [
{
'label': 'Scatter Dataset',
'data': [
{
x: 1,
y: 0,
}, {
x: 65,
y: 20,
}, {
x: 30,
y: 22,
}, {
x: 44,
y: 55,
}],
'fill': false,
'borderColor': 'rgb(75, 192, 192)'
}]
},
'options': {
scales: {
xAxes: [{
ticks: {
min: 1,
stepSize: 1
},
offset: true,
type: 'linear',
position: 'bottom'
}]
},
'showLines': true
}
});
}
And in HTML my Canvas looks like :
<div style="max-width: 1000px;max-height: 1000px;">
<canvas #canvas id="myChart" ></canvas>
</div>
How should I show first point correctly ?
I have created a barchart that works properly the way I want. Right now, I'm trying to add a linegraph to overlap the bars, but when I run the code, the linegraph appears, but the bars disappear. It seems pretty simple to add the linegraph, but for some reason it's not working. I'm not getting any mistakes in console either.
var x_text = ["Comodities","Consumer Discretionary","Utilities",
"Health & Biotech","Global Real Estate","Financials",
"Emerging Market Bonds","Technologies","Industrials",
"Oil & Gas","China Equities","S&P500"];
//
var trace1 = [{
x: x_text, // X axis (names)
y: zValues, // Values (y axis)
hoverinfo: zValues,
type: 'bar',
orientation:"v",
marker: {
color: color_list, // Color of bars
line: {
color: 'rbg(8,48,107)',
width: 1
}},
yauto: false,
showscale: true,
}];
var trace2 = {
x: x_text,
y: [-0.1,-0.1,2.3,3.3,1.0,0.4,0.9,3.0,-0.1,-1.4,3.0,0.2],
mode: 'lines',
line:{
color:'black'
},
type: 'scatter'
};
var layout = {
font:{
// Text size and color
size:16,
family:'helvetica',
color: "white"
},
annotations: arrow(),
xaxis: {
side: 'bottom',
orientation: "right"
},
yaxis: {
autosize: true,
tickfont: "white",
ticksuffix: "%",
// Y axis scale
autorange: false,
range :[-20,20]
},
// Graph position
margin: {
l: 90,
r: 90,
b: 120,
t: 20,
pad: 10
},
// Graph background colors
paper_bgcolor: "transparent",
plot_bgcolor:"transparent",
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv',data,layout);
Oh dam, my trace1 had braces+curly braces around the values, which worked for only the bar, but made it dissappear when the linegraph was called.
Is it possible to disable tooltips for only one series in a combination chart of canvasjs below?
data: [
{
type: "area",
color: "red", // change color here
fillOpacity: 1,
dataPoints: [
{ x: 0, y: 100 },
{ x: 100, y: 100 }
]
},
{
type: "area",
color: "yellow",
toolTipContent: " ",
dataPoints: [
{ x: 0, y: 10 },
{ x: 100, y: 100 }
]
}
]
Here is the link to my fiddle :
https://jsfiddle.net/Abhishek1191/s71djz9m/2
I have four separate series plotted inside the fiddle. 3 Area and 1 line. If anyone may let me know if I can disable tooltips for area series.
Thanks in advance
Instead of setting toolTipContent to empty string, set toolTipContent to null which will disable the toolTip for individual dataPoint / dataSeries. In your jsfiddle you are using v1.4.1 which does not support this feature. Please download the latest version. Here is the working code .
var chart = new CanvasJS.Chart("container",
{
data: [
{
toolTipContent: null,
type: "column",
dataPoints:[
{ x: 10, y: 20}
]
}
]
});
chart.render();