Do we have support for stacked bar chart in 2.1.5 version,I do not see below piece of code works with 2.1.5 version is there any alternate way to draw stacked bar chart for 2.1.5 version.below is code for the same which works with latest version and 2.1.9 version but not with 2.1.5 version
<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>
chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container'
},
xAxis: {
tickColor: '#FFFFFF',
tickWidth: 1,
categories: [''],
labels:{
enabled: false
},
visible:false
},
title:{
text:''
},
yAxis: {
title: {
text: ''
},
labels:{
enabled: false
},
visible:false
},
exporting: { enabled: false },
legend:{
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderWidth:0
}
},
tooltip: {
enabled: false
},
colors:['#999999', '#8BF30D', '#FF0000'],
series: [
{
name: '',
data: [1]
}, {
name: '',
data: [2]
},{
name: '',
data: [1]
}]
});
</script>
</body>
</html>
Yes, it is supported. However, you need to be careful which jQuery version you use, becasue older Highcharts version rely on it.
Highcharts 2.1.5 works well with jQuery 1.6.1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/2.1.5/highcharts.js"></script>
example: https://jsfiddle.net/kfumqvrz/
When you use jQuery 1.7.1, the bars do not appear until the browser window is resized - so Highcharts does not work well with that jQuery version.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/2.1.5/highcharts.js"></script>
example: https://jsfiddle.net/kfumqvrz/1/
Highcharts 2.1.9 works well with jQuery 1.7.1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/2.1.9/highcharts.js"></script>
example: https://jsfiddle.net/kfumqvrz/2/
Related
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'm going to prepare a stacked column charts report using highcharts. The problem is my data types are different.
Please, view image example
Could you help me create a chart like image. please
You can achieve this using Stacked Group in Highchart by handling data section properly.
Here, I tried to build same chart as you required. You can handle legend and other of the chart.
This should help you. I also created fiddle demo which you can access using below link.
Fiddle Demo: http://jsfiddle.net/t4u8b8co/1/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
categories: [
['19603', '19666'], '19603', '19603'
]
},
yAxis: {
title: {
text: 'Good or Bad'
}
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'Jane',
data: [244, 23, 4],
stack: '19603'
}, {
name: 'John',
data: [306, 522, 546],
stack: '19603'
}, {
name: 'Jane',
data: [376],
stack: 'female'
}, {
name: 'Janet',
data: [174],
stack: 'female'
}]
});
<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; 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 am having problems even getting off the ground with Highcharts maps.
I followed the rails installation.
Gemfile
gem "highcharts-rails", "~> 3.0.0"
application.js
//= require highcharts
//= require highcharts/highcharts-more
//= require highcharts/modules/data
//= require highcharts/modules/map
In my page
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
// Prepare demo data
var data = [{
'hc-key': 'us',
value: 3
}, {
'hc-key': 'ca',
value: 5
}, {
'hc-key': 'mx',
value: 20
}];
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: 'Showing only non-null areas'
},
subtitle: {
text: 'The <em>allAreas</em> option is false'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
mapData: Highcharts.maps['custom/north-america-no-central'],
joinBy: 'hc-key',
allAreas: false,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
</script>
As you can see from the screenshot, there is no map rendered.
I have seen a similar question here:
Highmaps with US States in Rails
but I have tried these permutations and combinations of placing the links to the js files in my application header without success. The simple "your first chart" installation in the docs works fine
http://www.highcharts.com/docs/getting-started/your-first-chart
.....as soon as I try maps, no joy.
EDIT
So,
if i remove the files from application.js and add
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
to my application header....the following works..
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Add lower case codes to the data set for inclusion in the tooltip.pointFormat
$.each(data, function () {
this.flag = this.code.replace('UK', 'GB').toLowerCase();
});
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: 'Fixed tooltip with HTML'
},
legend: {
title: {
text: 'Population density per km²',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
padding: 0,
pointFormat: '<span class="f32"><span class="flag {point.flag}"></span></span>'
+ ' {point.name}: <b>{point.value}</b>/km²',
positioner: function () {
return { x: 0, y: 250 };
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
}
}]
});
});
});
</script>
Surely there has to be a nice "rails" way to get this working without explicitly calling the files in the header?