I'd like to remove the empty space at the left of the chart.
Have found no solution so far.
OK so i want all the columns to be placed on the right side of the ticks as in the fiddle, and remove the empty space between the y axis and the first tick.
Thanks in advance
$(function() {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {},
yAxis: [{
min: 0,
}],
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: 0.25
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.3,
pointPlacement: 0.10
}]
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<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>
Related
How can I show multiple series with rowsUrl?
Example fiddle: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/data/livedata-rows
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Live Data (Rows JSON)'
},
subtitle: {
text: 'Data input from a remote JSON file'
},
data: {
rowsURL: 'https://demo-live-data.highcharts.com/time-rows.json',
firstRowAsNames: false,
enablePolling: true
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.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>
Use seriesMapping property:
data: {
...,
seriesMapping: [{
x: 0,
y: 1
}, {
x: 0,
y: 2
}]
}
Live demo: https://jsfiddle.net/BlackLabel/k8gt2vLp/
API: https://api.highcharts.com/highcharts/data.seriesMapping
I want to dispaly label text in one line on horizontal bar in highcharts. below is the code.I want to dispaly label text in one line on horizontal bar in highcharts. below is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="container" style="min-width: 100%; max-width:100%; height: 400px; margin: 0 auto"></div>
</div>
</div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
marginLeft:120,
marginBottom: 100,
type:'bar'
},
credits: {enabled: false},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50
},
title: {text: null},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
color: '#006666',
pointWidth: 40,
data: [2, 2, 1, 1, 1]
}, {
name: 'Jane',
color: '#00FF00',
pointWidth: 40,
data: [2, 2, 2, 1, 2]
}, {
name: 'Joe',
color: '#FF8C00',
pointWidth: 40,
data: [1, 1, 1, 1, 1],
}],
xAxis: {
categories: ['Computer Devices & Accessories', 'Computer Peripherals Hire & Repair Services', 'Computer Laptop Hardware & Peripherals', 'Computer Stationery, Hard disk, Ram, Pen Drives & Other Products', 'Internet Accessories'],
labels: {
align:'left',
x:5,
style: {
fontSize: '1em',
color:'#fff'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
});
});
</script>
</body>
</html>
There is a better example of what I want to accomplish
I want to dispaly label text in one line on horizontal bar in highcharts. below is the code.I want to dispaly label text in one line on horizontal bar in highcharts. below is the code
You need to set an width for your labels
...
style: {
fontSize: '1em',
color:'#fff',
width:'500px'
}
Fiddle
As you can see the 4th bar is too short so you will have to set the width for a second line appear
Try to use below property in label
label{
display:block
}
I have a bar chart which has dynamic columns in it.
What i want is that except the last column, all the columns should be of grey color. And the last column should be of green.
Can anyone help me out in this?
You can give color to last column in this way
series: [{
name: 'Test',
color:'grey',
data: [50, 30, 40, 70, {y: 34, color: '#66ff33'}]
}]
Fiddle link
So if the data array is dynamic then for the last value of array you have to make last element as {y: 34, color: '#66ff33'} of the array.
You could use zones.
Demo: http://jsfiddle.net/udL2ads2/6/
$(function() {
var histSuccess = [100, 99, 100, 98, 98, 99.9, 97.5, 100, 95, 90];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with last column different color'
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
series: [{
name: 'Test',
color: 'grey',
data: histSuccess,
zoneAxis: 'x',
zones: [{
value: histSuccess.length - 1.5,
color: 'grey'
},{
color: '#66ff33'
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
Can we give plot coordinates as a combination of string and integer without using x axis property categories?
For eg
series: [{
name:'Before Campaign',
data: [['Jan',20],['Feb',30]]
}]
I have the example at http://jsfiddle.net/yxeLyao9/3/
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 400px; height: 400px"></div>
$(function () {
$('#container').highcharts({
chart: {
marginTop: 50,
marginBottom: 50,
marginLeft: 50,
marginRight: 50,
type: 'column'
},
title:{
text:'Revenue'
},
/*xAxis: {
//categories: ['Jan','Feb','Mar','Apr','','May','Jun','Jul','Aug']
},*/
series: [{
name:'Before Campaign',
data: [['Jan',20],['Feb',30]]
}]
});
});
If I understand you correctly, you don't want to explicitly specify the categories? You want the categories on the xaxis from the data?
Just specify that the xaxis is of type category and highcharts will take them from the data:
xAxis: {
type: 'category'
}
Updated fiddle.
I want to build realtime highcharts, and i have user table added sidekiq worker which fetches user_table every 5 minutes and i want it show my users data in real time in my rails application?
Below i have static data, how to retrieve data dynamically from database?
In View:
<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>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'User balance',
x: -20 //center
},
xAxis: {
categories: ['Users']
},
yAxis: {
title: {
text: 'Balance'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '$'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: User'',
data: [<%= #user.sum('equivalent_sum')%>]
}]
});
});
In Controller:
#user = User.where('balance > ?', 0)