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
Related
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 use highcharts,my data likse this:
data: [
[5,11,20,"peter"],
[4,12,20,"tom"],
[6,13,20,"kate"],
[7,14,15,"king"],
[8,16,16,"jin"]
]
When I use my code to test,the result just display 3 columns data.
How to display 4th column data(4th column is name) or more than 3 columns data?
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 't1'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: [
[5,11,20,"peter"],
[4,12,20,"tom"],
[6,13,20,"kate"],
[7,14,15,"king"],
[8,16,16,"jin"]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}]
});
});
I modified my code like this,then it can display all columns.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script>
$(function () {
var data= [
{"employeeCode":5,"w1":11,"b1":40,"employeeName":"peter"},
{"employeeCode":4,"w1":12,"b1":41,"employeeName":"tom"},
{"employeeCode":6,"w1":13,"b1":39,"employeeName":"kate"}
];
data.map(function(el,i){
data[i]=({x:el.employeeCode,y:el.w1,z:el.b1,employeeName:el.employeeName});
})
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 't1'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: 'employeeCode:{point.x}<br/>' +
'w1:{point.y}<br/>' +
'b1:{point.z}<br/>' +
'employeeName:{point.employeeName}',
followPointer: true
},
series: [{
data: data,
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}]
});
});
</script>
</body>
</html>
I am creating a pie chart in Highcharts with a legend. When I specify the series as an array of values (my preferred method), the legend displays the string "Slice" for each value. If I instead specify the series as a list of objects with named values, I correctly see the data names. Can I see the data names if I specify the series as an array of values?
Here is the code that doesn't work but that I would like to use:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
xAxis: {
categories: ["BADHAM, J", "COPPOLA, F", "GUILERMAN, J", "HILLER, A",
"SPIELBERG, S"],
},
series: [{
name: 'Directors',
data: [74100000, 30673000, 36915000, 50000000, 90434000],
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
Here is the code that does work when I specify the series as a list of objects with named values:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
series: [{
name: "Directors",
slicedOffset: 20,
data: [{
name: "BADHAM, J",
y: 74100000
}, {
name: "COPPOLA, F",
y: 30673000
}, {
name: "GUILERMAN, J",
y: 36915000
}, {
name: "HILLER, A",
y: 50000000
}, {
name: "SPIELBERG, S",
y: 90434000
}]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
You can do this with tooltip.formatter and legend.labelFormatter and accessing the highchart options.
For the tooltip text:
tooltip: {
formatter: function() {
var sliceIndex = this.point.index;
var sliceName = this.series.chart.axes[0].categories[sliceIndex];
return 'The value for <b>' + sliceName +
'</b> is <b>' + this.y + '</b>';
}
},
And for the legend:
legend: {
enabled: true,
labelFormatter: function() {
var legendIndex = this.index;
var legendName = this.series.chart.axes[0].categories[legendIndex];
return legendName;
}
},
Live demo.
as of 5 years later, do this:
legend: {
enabled: true,
labelFormatter: function() {
let legendName = this.series.chart.axes[0].categories[this.x];
return legendName;}}
For some reason, Highcharts is formatting my text categories as dates.
Background Info
I am getting my data from a Google Spreadsheet. The labels should say Grade 12, Grade 11, etc. I know I can overwrite the xAxis labels with the categories function, but I want I sustainable solution so that my end users can change the labels as they wish.
CodePen
$(function() {
Highcharts.setOptions({
chart: {
defaultSeriesType: 'bar',
backgroundColor: '#fff',
shadow: false
}
});
$('#ms-highschool').highcharts({
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
googleSpreadsheetWorksheet: 5
},
title: {
text: 'Charter School Makret Share for High School Grades, SY 2014-15'
},
yAxis: {
min: 0,
max: 40,
tickInterval: 10,
title: {
text: 'PCS Share'
}
},
xAxis: {
labels: {
enabled: true,
}
}
});
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script>
</script>
</head>
<body>
<div id="ms-highschool"></div>
</body>
You can specify type of x axis explicitly to have the problem solved.
xAxis: {
labels: {
enabled: true,
},
type: "category"
}
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