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>
Related
I am trying to generate a 3d pie chart using HighChart and the data is in JSON. It seem to only generate 2d even though I have enabled 3D.
I am trying to generate a 3d pie chart like this
https://www.highcharts.com/demo/3d-pie
Can someone show me what i am missing on my code below.
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="code.highcharts.com/highcharts-3d.js"></script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'chart1',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
// x: -20 //center
},
subtitle: {
text: '',
// x: -20
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
legend: {
// layout: 'vertical',
// align: 'right',
// verticalAlign: 'top',
// x: -10,
// y: 100,
// borderWidth: 0
enabled:false
},
series: []
}
$.getJSON("data1.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
JSON DATA
[{
"name": "",
"data": ["Asset","Total Lending","Total Deposits","Brokered Deposits" ]
}, {
"name": "First Republic Bank",
"data": [48353330,38079817,37130929,1957317]
}, {
"name": "Cathay Bank",
"data": [11488897,8902674,8814629,497369]
}]
You can see the 3d pie working in this codepen. I have updated the pen with your json data.
The only thing missing in your options is:
plotOptions: {
pie: {
depth: 25
}
}
If you look here you can see that some of the charts require not only the chart property to be sent but plotOptions as well.
while some specific settings for different chart type can be found under plotOptions;
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 got common dataset for both line series and bar graph . In other words dataset consists both line series dataset and bar graph dataset. Now I want to plot line series graph on separate x-axis and bar graph on separate x-axis. And want to control them both from same frame. Like both tooltip for both should come in same popup, from same section I can show and hide them. Attached my screenshot , currently they are sharing same x-axis. I want to separate them. Here is my piece of code.
for(j=0; j<timelinejson.length; j++){
seriesOptions[j] = {
//name: selectedMarkers[i],
name: timelinejson[j].marker_desc,
data: mData,
marker : {
enabled : true,
radius : 3
},
type : 'spline',
tooltip : {
valueDecimals : 2
}
};
}
seriesOptions[10] = {
name: 'Speed',
data: [[1372636800000, 0.16], [1375315200000, 0.36], [1377993600000, 0.4], [1380585600000, 0.68], [1383264000000, 0.6], [1385856000000, 0.64], [1388534400000, 0.68], [1391212800000, 0.69], [1393632000000, 0.71], [1396310400000, 0.73], [1398902400000, 0.74], [1401580800000, 0.75], [1404172800000, 0.76], [1406851200000, 0.17], [1409529600000, 0.67], [1412121600000, 0.18], [1414800000000, 0.58], [1417392000000, 0.28], [1420070400000, 0.58], [1422748800000, 0.49], [1425168000000, 0.39], [1427846400000, 0.29], [1430438400000, 0.59], [1433116800000, 0.19]],
type: 'column',
valueDecimals: 1
};
drawTrend(seriesOptions,temp)
function drawTrend(marker_array_main,temp) {
$('#trendChart'+temp).highcharts('StockChart', {
chart: {
height: 400
//width: 500
},
rangeSelector: {
selected: 4
},
yAxis: {
/*labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},*/
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2
},
series: marker_array_main
});
}
I think that you can use multiple yAxis in case of your chart. You can add as many yAxes as you want and you can connect your series with this axes using yAxis:x parameter in your Series object.
x value is an index of specific axis in yAxis array.
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
Here you can find simple example of this kind of chart from Highcharts demos:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
I want to create barchart having custom horizontal lines added to show average benchmarks. Also there is labels added on these lines to show benchmark heading. I get line labels cut off as shown in following image.
Barchart
Also if plot line value is beyond the range plotted, plot line get hidden. How to handle this case in highchart? Following is the code that I am using.
$(function () {
$('#chartContainer').highcharts({
credits: {
enabled: false
},
colors: ['#3C791D','#BEBEBE','#7F7F7F'],
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Great', 'Neutral', 'Bad']
},
yAxis: {
title: {
text: ''
},
plotLines:[{
value:80,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'XYZ Average: 80%',
align: 'right'
}
},{
value:60,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'PQR Average: 60%',
align: 'right'
}
}]
},
legend: {
enabled : false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter:function() {
return this.y + '%';
}
},
colorByPoint: true,
enableMouseTracking: false
}
},
series: [{
type: 'column',
name: "s",
data: [70, 10, 40]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<html>
<body>
<div id="chartContainer"></div>
</body>
</html>
Set height for the chart and also the max value for Y-axis
chart: {
height: 600
},
yAxis: {
min: 0,
max: 100
}
I am looking for a basic example from Highcharts where the following is done
a. 3 separate graphs windows stacked on top of each other
b. combine zoom option where all three separate graphs can bee zoomed for data.
what I was looking is "highstock" data where i can add more windows.
thanks,
Bilal
You can refer this example
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
You may use any number of y-axis i.e stacked graphs
#Bial I have created a fiddle for your use-case, view the fiddle at https://jsfiddle.net/Nishith/4b33pvc2/ Its having 3 series with navigator.
code for each series is like below :
{
name : 'critical alarm',
data :data.criticalAlarmCountTimeseries,
id : 'critical',
zIndex : 1,
lineWidth:3,
color:'red',
yAxis: 0 ,
marker : {
enabled : false
}
}
You can catch afterSetExtremes on xAxis chart and call setExtremes on the other charts to "zoom".
events: {
afterSetExtremes: function() {
if (controllingChart == "chart3") {
var xMin = this.chart.xAxis[0].min;
var xMax = this.chart.xAxis[0].max;
chart1.xAxis[0].setExtremes(xMin,
xMax,
true);
chart2.xAxis[0].setExtremes(xMin,
xMax,
true);
}
}
}
Example: http://jsfiddle.net/Gv7Tg/33/