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/
Related
I am looking for settings to change some of the frame-lines in the radar chart.
There are 3 types of lines I'd like to be customized:
The red triangle line outside.
The 3 blue lines from center to each corner.
The small green triangle.
I've searched a lot but totally had no clue. I have tried to change the lineWidth of the yAxis and it only changes the width of the upper vertical line.
Here below is the code. It uses the latest highcharts to render the chart, as of Sep 12 2021 when I'm writing this question, it's 9.2.2:
window.chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
polar: true,
type: 'area'
},
title: {
text: "radar chart title",
margin:33,
useHTML:true
},
tooltip: {
pointFormat: '<span style="color:{series.color}"><b>{point.y:,.0f}</b>'
},
plotOptions: {
animation:true
},
xAxis: {
categories: ["a","b","c"],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 4,
min: 0,
max:100
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: "Haha",
animation:true,
data: [52,119, 12],
lineWidth:4
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
Use plot lines for y-axis:
yAxis: {
...
plotLines: [{
color: 'red',
value: 100,
zIndex: 2
}]
}
Use gridLineColor for x-axis:
xAxis: {
...,
gridLineColor: 'blue'
}
Use gridLineColor for y-axis:
yAxis: {
gridLineColor: 'green',
...
}
Live demo: http://jsfiddle.net/BlackLabel/fm45ab3k/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
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;
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
},
If you use a bar chart in Highcharts, the zoom does not seem to work properly.
You can select the area and also the button "Reset zoom" appears. The chart, however, is not zoomed in.
The only code I added to the basic bar example was the zoom type:
chart: {
type: 'bar',
zoomType: 'x'
},
Complete example: http://jsfiddle.net/966off9e/
Is this a bug or a feature? ;-)
I think this is somehow a bug in Highcharts, when you use categorized axis. But a workaround would be using a min for that axis:
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
min: 0
}
Here's the DEMO
Just add 'minRange' to the xAxis: http://jsfiddle.net/mushigh/axy8v9oa/
<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: {
type: 'bar',
zoomType: 'x'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
minRange: 1,
},
yAxis: {
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
Another possibility is that the amount of data is bigger than the cropThreshold variable. See this related post.
You can also see the official docs for this variable. Every kind of graphic has this variable with different default values. You should check it out to be sure.
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.