I tried to resize the width and height of my custom button in highcharts, but I can't find any demo or tutorial about this.
http://jsfiddle.net/Murali_Kaliappan/2F4pJ/1029/ is my fiddle
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
exporting: {
buttons: {
customButton: {
x: -62,
onclick: function () {
alert('Clicked');
},
symbol: 'url(https://png.icons8.com/metro/1600/expand.png)',
height:18,
width:18
}
}
}
});
});
customButton.symbol should be used with SVG objects - that's why configuration options like height and width don't work.
You can use Highcharts defs to define image background for your button:
JS:
defs: {
custombtnbg: {
tagName: 'pattern',
id: 'custom-btn-bg',
x: 0,
y: 0,
width: 24,
height: 24,
children: [{
tagName: 'image',
width: 24,
height: 24,
href: 'https://png.icons8.com/metro/1600/expand.png'
}]
}
},
(...)
exporting: {
buttons: {
customButton: {
x: -62,
id: 'btn',
onclick: function() {
alert('Clicked');
},
text: '',
className: 'custom-btn',
theme: {
'stroke-width': 0
}
}
}
}
CSS:
#import 'https://code.highcharts.com/css/highcharts.css';
.custom-btn {
fill: url(#custom-btn-bg);
}
Live demo: http://jsfiddle.net/BlackLabel/u4Lx71by/
Doc about defs: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
I'm using highcharts to display stackbars graph.
I'd the y axis label to appear on top of the y axis, that's why I'm setting its offset to -10. however, when the graph's title is not displayed I cannot see the axis label.
Here's an example with graph title and axis title
Here's an example without graph title and from some reason axis title disappears
Here's how I set my yAxis label:
yAxis: {
lineWidth: 2,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -20
}
},
updated Link
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [70, 0]
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
margin: [70, 0]
Please check the below jsfiddle.
http://jsfiddle.net/ErU8H/537/
var gfxPath = 'http://www.highcharts.com/components/com_demo/assets/demo/gfx/';
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Pattern fill plugin demo'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
plotBands: [{
from: 100,
to: 200,
color: {
pattern: gfxPath + 'pattern3.png',
width: 6,
height: 6
}
}]
},
series: [{
type: 'area',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
fillColor: {
pattern: gfxPath + 'pattern1.png',
width: 6,
height: 6
},
states: {
hover: {
halo: {
size: 8,
opacity: 1,
zIndex:10,
attributes: {
fill: '#ffffff',
'stroke-width': 1,
stroke: '#0b9de8'
}
}
}
}
}, {
type: 'column',
data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
color: {
pattern: gfxPath + 'pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
});
The halo effect on point hover is not rendering properly in chrome and firefox only when we use pattern fill plugin. I ve to use patterns and same time wanted to implement halo effect on point hover. Any help on this?.
Simply set higher zIndex for a halo: http://jsfiddle.net/ErU8H/542/
states: {
hover: {
halo: {
attributes: {
zIndex: 10
}
}
}
}
For this.x, I am getting the index location when I push the data in via code. If I populate the data separately, like the following code, then this.x returns the right item. How can I fix this issue?
Works
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
Index location is getting pushed out for this.x here
var points = [{
Name: 'good',
Y: '15000'
}, {
Name: 'baad',
Y: '3000'
}, {
Name: 'wow',
Y: '2000'
}];
var chartData = {
GetChartSeries: function (points, name) {
var seriesData = [];
if (points != null && points != 'undefined') {
for (i=0; i<points.length; i++) {
seriesData.push({
name: ""+points[i].Name,
y: parseFloat(points[i].Y)
//,color: ''
});
}
}
return seriesData;
}
};
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80],
borderColor: '#A4A4A4',
borderRadius: 5,
borderWidth: 2
},
legend: {
enabled: false
},
title: {
text: 'Graduation Year Breakdown'
},
colors: ['#790000'],
legend: {
enabled: false
},
plotOptions: {
series: {
/*
dataLabels: {
enabled: true,
color: 'red'
},
*/
borderRadius: 3,
colorByPoint: true
}
},
tooltip: {
formatter: function() {
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
'in year: '+ this.x;
}
},
xAxis: {
categories: [],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Students'
}
},
series: [{
//name: 'Population',
data: chartData.GetChartSeries(points, ""),//[4000, 3400, 2000, 34000, 120000],
dataLabels: {
enabled: true,
//rotation: -90,
color: '#4F4F4F',
align: 'center',//'right',
//x: 4,
//y: 10,
style: {
fontSize: '12px',
//fontWeight: 'bold',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
While I am uncertain as to why your solution doesn't work, I can propose an alternative solution.
The tooltip formatter function has access to a number of different parameters. Instead of this.x, you could use this.point.name.
For example:
formatter: function() {
// If you want to see what is available in the formatter, you can
// examine the `this` variable.
// console.log(this);
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
'in year: '+ this.point.name;
}
Can we create multiple x-axis chart like this using Highcharts?
If yes, can someone please provide some pointers?
There are three year data displayed. i.e. 2010,2011, 2012
https://www.adr.com/DRDetails/CorporateActions?cusip=055622104
The older answers didn't run for me in JSFiddle.
Here is a working example, if it helps anyone:
http://jsfiddle.net/kPqKW/
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime',
opposite: true
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}, {
data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0],
pointStart: Date.UTC(2010, 0, 10),
pointInterval: 24 * 3600 * 1000, // one day
xAxis: 1
}]
});
});
Using highstocks (highcharts lesser known sibling), you can do something like what you're looking for. Check out this fiddle
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'area',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'area',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
You can simply use Highcharts grouped categories plugin, take a look: https://github.com/blacklabel/grouped_categories
It seems possible, but in different view. one axis at the top and other one is at the bottom. You've set opposite to true as we do for y - axis. Have a look at this question in
Highcharts forum
<div id="container" style="height: 400px; width: 500px"></div>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: [{
type: 'datetime',
},{
type: 'datetime',
opposite: true
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
},{
data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0],
pointStart: Date.UTC(2010, 0, 10),
pointInterval: 24 * 3600 * 1000, // one day
xAxis: 1
}]
});
</script>
for working example, look at this jsfilddle
you may go through this fiddle https://jsfiddle.net/ajaytripathi10/z8mrwhxz/. Hope this will help.
$(function () {
$('#container').highcharts({
title: {
text: 'Shared tooltip chart'
},
xAxis: [{
type: 'datetime',
id: 'x1'
}, {
type: 'datetime',
id: 'x2',
opposite: true
}],
yAxis: {
min: 0
},
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var tooltip = '';
var i, len;
tooltip += '<small>Apple</small>';
tooltip += '<table>';
for (i = 0, len = 4; i < len; i++) {
if(this.points[i] != undefined){
if(this.points[i].series.name.indexOf('Apple') >= 0){
tooltip += '<tr>';
tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
tooltip += '</tr>';
}
}
}
tooltip += '</table>';
tooltip += '<small>Mango</small>';
tooltip += '<table>';
for (i = 0, len = 4; i < len; i++) {
if(this.points[i] != undefined){
if(this.points[i].series.name.indexOf('Mango') >= 0){
tooltip += '<tr>';
tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
tooltip += '</tr>';
}
}
}
tooltip += '</table>';
return tooltip;
}
},
series: [{
name: 'Apple',
id: 'series1',
xAxis: 'x1',
color: 'rgba(255, 0, 0, 1.0)',
data: [5, 3, 4, 7, 6, 1, 0],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 10)
}, {
name: 'Apple New',
id: 'series2',
//linkedTo: 'series1',
xAxis: 'x2',
color: 'rgba(255, 180, 180, 1.0)',
data: [4, 5, 5, 6, 1, 3, 4],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 17)
},{
name: 'Mango',
id: 'series3',
xAxis: 'x1',
color: 'rgba(255, 0, 0, 1.0)',
data: [15, 13, 14, 17, 16, 11, 10],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 10)
}, {
name: 'Mango New',
id: 'series4',
//linkedTo: 'series1',
xAxis: 'x2',
color: 'rgba(255, 180, 180, 1.0)',
data: [14, 15, 15, 16, 11, 13, 14],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 17)
}]
});
});
Complete code for making horizontal and vertical line in column,piechart highcharts
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="col-md-4" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="col-md-8">
<div id="container2" class="col-md-6" style="min-width: 310px; height: 400px; margin: 0 auto" class="col-md-6"></div><div id="container3" class="col-md-6" style="min-width: 310px; height: 400px; margin: 0 auto" class="col-md-6" class="col-md-6">dddd</div>
</div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'sample charts for both horizontal and vertical line'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
gridLineWidth: 1,
minPadding: 2,
maxPadding: 2,
maxZoom: 6 ,
categories: ['Jan', 'Feb', 'Apr', 'May', 'Jun',
'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return '$'+this.value;
}
},
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
// name: '',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}]
});
Highcharts.chart('container2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
Highcharts.chart('container3', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
</script>
</body>
</html>