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
}
Related
I'm a css novice... I have a chart that looks great and an HTML table that looks very basic. I want the table to match the style of the chart (font, font size, etc.).
I've included the highcharts.css file in the head of the HTML and added styledMode: false to the charge definition.
<head>
<link rel="stylesheet" type="text/css" href="code/css/highcharts.css">
</head>
<body>
<script src="code/highcharts.js"></script>
<script src="code/modules/data.js"></script>
<script src="code/modules/drilldown.js"></script>
<table border='1' width='100%'>
rows here...
</table>
<div id="container2" style="min-width: 310px; max-width: 100%; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
styledMode: true,
},
title: {
text: 'Web Firewall - Top 3',
style: {"fontSize": "15px", "color":"red" },
},
subtitle: {
text: 'Source: Something Firewall'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Block %',
colorByPoint: true,
data:
[{"name":"www.blah.org","y":44124},{"name":"menus.foo.org","y":1602},{"name":"mmm.boo.org","y":508}] }]
});
</script>
</body>
I have a columns chart and I need to draw the left, right and bottom lines of the chart (x/y axes) but need to either omit the top line
or ...
draw a white line to cover the top line. Viewing the raw data in Chrome, I can see the box is drawn using <rect>.
Is it possible to use JS to locate that and get the x,y,width attributes to draw a white line or remove it and replace with 3 black lines
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Annual Performance</title>
<!-- this code to include Highcharts with jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- <script src="/js/jquery.min.js"></script> -->
<!--this code is the required highcharts javascript file -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<!-- <script src="/js/highcharts.js"></script> -->
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script>
$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: 50,
plotBorderWidth: 3,
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y:.2f} %'
}
}
},
legend: {enabled: false},
yAxis: {
title: {text: null},
max: 4,
allowDecimals: false,
labels: {
enabled: true,
formatter: function() {
return this.value + ' %';
}
}
},
title: {
text: 'Annual Performance'
},
subtitle: {
text: 'XXX Shares'
},
series: [{
data: [
[2008, 2.17],
[2009, 0.15],
[2010, 0.00],
[2011, 0.00],
[2012, 0.01],
[2013, 0.01],
[2014, 0.01],
[2015, 0.00],
[2016, 0.00],
[2017, 0.38]
],
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
You can create additional yAxis and use lineWidth and offset properties to acheve needed result:
xAxis: {
lineWidth: 3
},
yAxis: [{
lineWidth: 3,
offset: -2,
title: {
text: null
},
max: 4,
allowDecimals: false,
labels: {
enabled: true,
formatter: function() {
return this.value + ' %';
}
}
}, {
opposite: true,
title: {
text: ''
},
offset: -2,
lineWidth: 3,
}],
Live demo: http://jsfiddle.net/BlackLabel/cj497k6s/
API Reference: https://api.highcharts.com/highcharts/xAxis.lineWidth
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>
I am trying to implement Highcharts Waterfall graph in rails 3.Currently I am just using the default data as provided by http://www.highcharts.com/demo/ Following is my view file for testing purpose
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data: [{
name: 'Start',
y: 120000
}, {
name: 'Product Revenue',
y: 569000
}, {
name: 'Service Revenue',
y: 231000
}, {
name: 'Positive Balance',
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
}, {
name: 'Fixed Costs',
y: -342000
}, {
name: 'Variable Costs',
y: -233000
}, {
name: 'Balance',
isSum: true,
color: Highcharts.getOptions().colors[1]
}],
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
},
style: {
color: '#FFFFFF',
fontWeight: 'bold',
textShadow: '0px 0px 3px black'
}
},
pointPadding: 0
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
Now what I want to achieve is firstly the data required should be dynamic basically the name: and the y: values. The values can be passed using a json object but how to build the json when the values are inconsistent as in case of
name: 'Positive Balance',
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
and
name: 'Balance',
isSum: true,
color: Highcharts.getOptions().colors[1]
as there are no y: values. Kindly help me out as I am not able to figure out how to achieve dynamic data in this chart.
Here is the answer just in case if it helps out anyone. This is the example with dynamic data. http://www.highcharts.com/demo/waterfall .In the controller file
class GraphsController < ApplicationController
def index
defaults = [:name=>'Positive Balance', :isIntermediateSum=>'true', :color=>'Highcharts.getOptions().colors[1]'] #array for positive balance which would automatically be calculated once we pass the correct values in the json format
defaults_final = [:name=>'Balance', :isSum=>'true', :color=>'Highcharts.getOptions().colors[1]'] #array for final balance
positivegraph = Graph.all(:conditions =>'y > 0') # for the positive values
negativegraph = Graph.all(:conditions =>'y < 0') # for the negative values
positive_graph = positivegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of positive values
negative_graph = negativegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of negative values
#user_hash_array = positive_graph.concat(defaults) #concat arrays successively
#user_hash_array = #user_hash_array.concat(negative_graph)
#user_hash_array = #user_hash_array.concat(defaults_final).to_json
end
end
In the view file I have
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'jquery.min' %>
<%= javascript_include_tag 'highcharts' %> <!--[if IE]> <%= javascript_include_tag 'excanvas.compiled' %> <![endif]-->
<%= javascript_include_tag 'highcharts-more' %>
<%= javascript_include_tag 'exporting' %>
<title>Highcharts Example</title>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data:
<%= raw #user_hash_array %>
,
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
},
style: {
color: '#FFFFFF',
fontWeight: 'bold',
textShadow: '0px 0px 3px black'
}
},
pointPadding: 0
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
In the database I have two fields 1 is the name field and the other field is y which has the integer values.
I am new to this forum and have two questions.
I just want know if we can remove the gap behind the axis in High Charts. I haven't found any option in the API.
How to get the series label in single line.
I am not able to post the image as I am a new user.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 0,
categories: ['Deutsche-FR Bank', 'Barelays-LDN', 'HSBC-SG', 'Citi-NY'],
minorTickLength: 0,
tickLength: 0,
labels: {
align: 'left',
x: 2,
y: 7,
color: '#2257D6',
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
text: null
}
},
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high',
color: '#333'
},
labels: {
enabled: false,
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {
bar: {
borderWidth: 0.0,
pointWidth: 22,
dataLabels: {
enabled: false
}
},
series: {
shadow: false
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
visible : false,
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Count',
data: [82,323,245,350],
color: '#2AAA00',
borderWidth: 0,
plotShadow: false,
plotBorderWidth: 0
}]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:220px;height:145px;overflow:auto"></div>
</body>
How to get the series label in single line
For this, you need to use the property Rotation as
rotation: 90
Check the API.
Setting this property also answers your question 1.
Here you find the Demo