I am using highcharts to create a graph. I am able to display the output but I am unable to remove the label . I am not able to figure out how to get rid of the label.
//document.getElementById('container').style.visibility='visible';
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Stock Price',
},
subtitle: {
text: '<a style=\"color:blue;\" href=\"https://www.alphavantage.co\">Source: Alpha Vantage</a>'
},
xAxis: {
type: 'datetime',
showLastLabel: true,
endOnTick: true,
categories: [ "05/30", "05/31", "06/01", "06/02", "06/05", "06/06", "06/07", "06/08"],
labels:{
step:2},
},
yAxis: [{
title: {
text: 'Stock Price'
},
labels: {
enabled: false
},
},{
title: {
text: 'Volume ',
},
labels: {
format: '{value}m',
enabled: false,
},
opposite:true,
}],
plotOptions: {
labels: {
enabled: false,
},
line: {
enableMouseTracking: false
},
series: {
marker: {
enabled: false
},}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
labels: {
enabled: false,
},
name: 'Tokyo',
type: 'area',
color: '#F66464',
data: [4,5,6,7,8,9,1],
}, {
name: 'London',
type: 'column',
color: '#FFFFFF',
yAxis: 1,
data: [1,2,3],
}]
});
<!DOCTYPE html>
<html>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I tried disabling the label but it doesn't seem to work.
I want to get rid of the labels ("Tokyo" written in white) in the following output.
You were so close. The label can be removed by including this:
label: {
enabled: false,
},
in your series, or in the plotOptions if you want to remove all labels.
You typed labels with an s, which is unfortunately not correct.
API on series label: https://api.highcharts.com/highcharts/plotOptions.series.label
https://api.highcharts.com/highcharts/series.line.label
Go through this docs.
You need to make series.lable.enabled = false;
Related
I have tried to add border for selected series. Please adivise
series: [{
showInLegend: false,
name: 'Twitter Trending',
colorByPoint: true,
data: dataArr,
select: {
borderWidth: 4,
borderColor: '#e4b0b2'
},
allowPointSelect: true
}]
Reference Screenshot
In order to get desired result, plotoptions will be
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
borderWidth: 4,
borderColor: '#e4b0b2'
}
}
}
},
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
borderWidth: 4,
borderColor: '#e4b0b2'
}
}
}
},
series: [{
name: 'John',
data: [3, 4, 4, 2, 5],
showInLegend: false,
name: 'Twitter Trending',
colorByPoint: true,
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I was trying to implement progress-bar/status-bar in highchart, need to show 2 colors for the progress bar/status bar one background color and another color for status/progress, achieved using stacking bar in highchart but first rectangle in that
have white stroke color so it differentiating 2 rectangles but i need to show it as single rectangle instead of 2,Is there anyway to remove that white stroke color to show as single one.
<html>
<head>
<script src="highchart.js"></script>
</head>
<body>
<div id="container" style="min-width: 100px; max-width: 200px; height: 50px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
tickColor: '#FFFFFF',
tickWidth: 1,
categories: [''],
labels:{
enabled: false
},
visible:false
},
title:{
text:''
},
yAxis: {
gridLineColor: '#FFFFFF',
minorGridLineWidth: 0,
lineColor: '#FFFFFF',
gridLineWidth: 0,
title: {
text: ''
},
labels:{
enabled: false
},
visible:false
},
exporting: { enabled: false },
legend:{
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
enabled: false
},
colors:['#999999', '#8BF30D', '#FFFFFF'],
series: [
{
name: '',
data: [1]
}, {
name: '',
data: [5]
},{
name: '',
data: [0]
}]
});
</script>
</body>
</html>
I think that you should be able to use borderWidth parameter that is described in Highcharts API:
http://api.highcharts.com/highcharts/plotOptions.column.borderWidth
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0
}
},
When you will use this parameter you will be able to eliminate white border from your columns. I have made an example how your chart will work using this option:
http://jsfiddle.net/rvj65mor/1/
I was trying to implement progress bar/status bar in HighChart, but some how highchart axis line not able to remove from the chart, tried with gridlinewidth grid line color but still the axis line shows up in the UI. is there any attribute to remove this
<html>
<head>
<script src="highchart.js"></script>
<script src="exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 210px; max-width: 300px; height: 50px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
tickColor: '#FFFFFF',
tickWidth: 1,
categories: [''],
labels:{
enabled: false
}
},
title:{
text:''
},
yAxis: {
gridLineColor: '#FFFFFF',
minorGridLineWidth: 0,
lineColor: '#FFFFFF',
gridLineWidth: 0,
title: {
text: ''
},
labels:{
enabled: false
}
},
exporting: { enabled: false },
legend:{
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
enabled: false
},
series: [{
name: '',
data: [5]
}, {
name: '',
data: [5]
},{
name: '',
data: [0]
}]
});
</script>
<style>
.chart-container .highcharts-grid {
display: none;
}
</style>
</body>
</html>
When chart type is set to bar, axes are reversed, try:
xAxis: {
visible: false
},
yAxis: {
visible: false
},
I have the following High Chart of type Bar. I did some online search on how to hide the grid lines , I was able to hide grid lines except first line. can anybody suggest me where i am the doing the mistake.
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
width:300,
height: 100,
type: 'bar'
},
title: {
text: ''
},
title: {
text: ''
},
xAxis: {
categories: ['Wind', 'Flood', 'EQ'],
tickWidth: 0,
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ''
},
gridLineColor: 'transparent',
minorGridLineWidth: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
}, legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
labels:
{
enabled: false
},
exporting: { enabled: false },
plotOptions: {
series: {
borderWidth: 0,
minPointLength:10 ,
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [10],
color: '#9CC7DC'
}, {
name: 'Jane',
data: [21],
color: '#72AFCD'
}, {
name: 'Joe',
data: [31],
color: '#1479ac'
}]
});
)};
You need to disable axis line by setting lineWidth parameter as 0.
I am trying to generate multi axes graph uding highchart as below.
But its not working, array generation and all are quite fine.
If i hardcode totalNoOfLabels and totalLabelsSize then its working. Please suggest:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
$(function () {
var result=[{"date":"2013-05-01","propertiesList": {"labelsCount":"14","totalSize":"62.62"}},{"date":"2013-05-04","propertiesList":{"labelsCount":"4","totalSize":"22.43"}},{"date":"2013-05-03","propertiesList":{"labelsCount":"7","totalSize":"34.09"}},{"date":"2013-05-02","propertiesList":{"labelsCount":"13","totalSize":"67.51"}},{"date":"2013-05-05","propertiesList":{"labelsCount":"3","totalSize":"11.65"}}];
var totalNoOfLabels=[];
var totalLabelsSize=[];
var dates=[];
dailyStatList = JSON.stringify(result);
var statsObj = $.parseJSON(dailyStatList);
$.each(statsObj, function() {
dates.push(this.date);
totalNoOfLabels.push(this.propertiesList.labelsCount);
totalLabelsSize.push(this.propertiesList.totalSize);
});
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Info'
},
xAxis: [{
categories: dates
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'No of labels',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Size ',
style: {
color: '#4572A7'
}
},
labels: {
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Labels',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: totalNoOfLabels
}, {
name: 'Size',
color: '#89A54E',
type: 'spline',
data: totalLabelsSize
}]
});
});
labelsCount and totalSize should be numbers, not strings. Parse that values, or put in JSON as numbers and will work properly.