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();
Related
I'm trying to make a histogram using highcharts, but the data is being bucketed by the server so as far as I can tell, I can't use the histogram chart type.
Here's my chart:
Highcharts.chart('container', {
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
type: 'category',
labels: {
rotation: -45
}
},
series: [
{
type: 'variwide',
showInLegend: false,
data: [
{ name: '0.00 - 10.10', y: 13, z: 1260000 },
{ name: '10.10 - 34.14', y: 10, z: 3000000 },
{ name: '34.14 - 54.56', y: 9, z: 2550000 },
{ name: '54.56 - 71.43', y: 15, z: 2110000 },
{ name: '71.43 - 102.09', y: 4.6, z: 3830000 },
{ name: '102.09 - 161.56', y: 1.8, z: 7430000 },
{ name: '161.56 - 217.26', y: 5.7, z: 6960000 },
{ name: '217.26 - 301.65', y: 0.7, z: 10550000 },
{ name: '301.65 - 382.82', y: 2.8, z: 10150000 },
{ name: '382.82 - 874.80', y: 0.2, z: 61500000 }
]
}
]
});
#container {
max-width: 800px;
min-width: 380px;
margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>
<div id="container"></div>
As you can see, the labels look pretty bad.
Two solutions, neither of which I can work out how to do:
Rename the points (I can do this) and move them to the right so that they're under the ticks
Better solution: make the x axis linear and have the labels appear in natural places like they would usually on a linear graph, similar to https://www.highcharts.com/demo/histogram . Changing the axis to linear seems to mess everything up on a variwide chart, though…
Any ideas?
Variwide series doesn't support non categorized x axis. It's reported as an issue on github: https://github.com/highcharts/highcharts/issues/7359
Workaround:
Variwide can be simulated by using column series.
Create a separate series for each point and link them together by putting linkedTo: ':previous' in each of them (except of the first one). Then set pointRange for every series. pointRange is series' property and cannot be assigned to individual points - that's why separate series has to be crated for each point.
series: [{
data: [
[5, 99]
],
pointRange: 2
}, {
linkedTo: ':previous',
data: [
[7.5, 72]
],
pointRange: 3
}, {
linkedTo: ':previous',
data: [
[14, 111]
],
pointRange: 10
}]
x position of the point indicates the middle of the column. So if the x = 5 and pointRange = 2 then the column will span from 4 to 6.
Unfortunately Highcharts doesn't handle extremes well while using multiple values of pointRange. Setting x axis minimum fixes it:
xAxis: {
min: 9, // 4 (axis' minimum) + 10 (max point range) / 2 = 9
},
These plotOptions are required to achieve proper widths of columns:
grouping: false,
groupPadding: 0,
pointPadding: 0,
Live demo: http://jsfiddle.net/BlackLabel/27gr3wh8/
API reference: https://api.highcharts.com/highcharts/
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.
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.
Taking from inspiration from this question, I am trying to figure out how to swap the axes of a Line chart in Chart.js.
For instance, in Highcharts we have this example, although it's an area chart.
Is it possible to "swap" the X and Y axis on a line chart?
datasets: [
{
label: "data1a",
data: [1,2,3,4,5,1,2,3]
}
]
yAxes: [
{
type: "linear",
display: true,
position: "left",
}
]
Here's my fiddle modified from the above link. I'm basically trying to move it so the graph looks rotated 90 degrees. I tried changing the y position to 'top' but it still doesn't look correct.
The proposal by #dralth works fine with version 2.8.0, but for some reason showLines: true does not work anymore since version 2.9.0.
It is still possible showing the lines by using the showLine property for each dataset.
In case of #dralth's example it works as follows (tested with version 2.9.3):
new Chart(document.getElementById('myChart'), {
type: 'scatter',
data: {
datasets: [
{
label: 'My Dataset',
data: [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}],
showLine: true
},
],
},
options: {
scales: {
xAxes: [
{
type: 'linear',
position: 'bottom',
},
],
yAxes: [
{
type: 'linear',
},
],
}
}
})
I was able to accomplish this in Chart.js 2.8.0:
Change data to a list of objects with x and y. Since the intention is to swap x and y axis, put the "x data" in the y variable and vise verse.
eg. [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}]
Set the chart type to 'scatter'
Add showLines: true to the options
The outcome is a line chart where the line can be horizontal, vertical, or even double back on itself. The orientation of the line is defined by which values you put in x and which you put in y.
Here's an example configuration:
new Chart(document.getElementById('myChart'), {
type: 'scatter',
data: {
datasets: [
{
label: 'My Dataset',
data: [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}],
},
],
},
options: {
showLines: true,
scales: {
xAxes: [
{
type: 'linear',
position: 'bottom',
},
],
yAxes: [
{
type: 'linear',
},
],
}
}
})
If you're using an older version of Chart.js that doesn't have scatter plots, you can use this plugin: http://dima117.github.io/Chart.Scatter/
I'm currently working on some doughnut charts using Canvas.JS, and I'm not able to find a proper way to set the chart's thickness.
The docs are pretty extensive (you can go over here to check them out) but I can't seem to find a proper solution for my "problem".
Right now I'm generating the chart with the following code:
CanvasJS.addColorSet('circColors', [
'#7583B2',
'#E6866A'
]);
var circChartOptions = {
animationEnabled: true,
colorSet: 'circColors',
data: [
{
labelFontColor: '#9EA4AC',
labelFontFamily: 'Lato, sans-serif',
labelFontWeight: 'normal',
indexLabelLineColor: 'white',
type: 'doughnut',
startAngle:-90,
toolTipContent: '{label}: {y} - <strong>#percent%</strong>',
indexLabel: '{label} #percent%',
dataPoints: [
{ y: 37.47, label: 'Mobile' },
{ y: 62.53, label: 'Desktop' }
]
}
]
};
$('#circChart').CanvasJSChart(circChartOptions);
Does Canvas.JS even provide a way to control the chart's thickness? Any help will be appreciated.
Thanks!
data: [
{
labelFontColor: '#9EA4AC',
labelFontFamily: 'Lato, sans-serif',
labelFontWeight: 'normal',
indexLabelLineColor: 'white',
type: 'doughnut',
innerRadius: "85%",
startAngle:-90,
toolTipContent: '{label}: {y} - <strong>#percent%</strong>',
indexLabel: '{label} #percent%',
dataPoints: [
{ y: 37.47, label: 'Mobile' },
{ y: 62.53, label: 'Desktop' }
]
}
use innerRadius to control the tickness
Looks like it's hard coded, so you'll have to change it in the canvasjs file.
var widthPercentage = 0.60;