I'd like to put a submit button in the second column of this tabular chart so each of 2 rows ("Location one" and "Location two") has one. How is the best to do this please?
[JS fiddle demo][1]
[1]: https://jsfiddle.net/Josko_Zadar/L39suv5d/47
Many thanks in advance!!!
You can add a button in every place you want using Highcharts.SVGRenderer
Highcharts.chart('container', {
series: [{
data: [1, 2, 3, 4]
}]
}, function(chart) {
chart.renderer.button('Button', 200, 100)
.attr({
zIndex: 3
})
.on('click', function() {
alert('Hello')
})
.add();
});
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
Simplified demo:
https://jsfiddle.net/BlackLabel/yrpsqzb0/
Related
Given a max number to the yAxis, for example:
yAxis: {
min: 0,
max:5
},
The chart will look like this:
However, is it possible to render the outer part? Just like the following below:
Instead of setting yAxis.min and yAxis.max, you can define tickPositions and disable endOnTick for yAxis and set offset for xAxis. For example:
yAxis: {
endOnTick: false,
tickPositions: [0, 2, 4, 6]
},
xAxis: {
offset: 62
},
pane: {
size: '100%'
}
Live demo: http://jsfiddle.net/BlackLabel/o0w1v83e/
API Reference: https://api.highcharts.com/highcharts/yAxis
Another way is to overwrite Highcharts clipping behaviour.
(function(H) {
H.SVGElement.prototype.clip = function() {};
H.wrap(H.Series.prototype, 'isPointInside', function(proceed) {
return true;
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/otchz6vL/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
How do I get HighCharts not to overlap columns in this chart? I have tried all sorts of options. What I would like is for highcharts to set the widths evenly depending on the number data elements in the series, the more the narrower.'
I have specified width: 300 to force the columns to overlap just to show what is happening in narrow chart and only add a few data elements.
$(function() {
Highcharts.chart('container', {
chart: {
type: 'column',
width: 300,
zoomType: 'x'
},
legend: {
enabled: false
},
series: [{
data: [
[102.0, 66815.0],
[96.0, 77760.0],
[90.0, 68710.0],
[84.0, 69452.5],
[78.0, 48807.5],
[72.0, 35472.5],
[66.0, 24595.0],
[60.0, 17790.0],
[54.0, 18010.0],
[48.0, 5635.0]
]
}]
});
});
http://jsfiddle.net/a0kjogh1/3/
Data should be sorted before you put it into the chart. You receive the error in the console.
data.sort((a, b) => {
return a[0] > b[0];
});
example: http://jsfiddle.net/a0kjogh1/4/
Take a look at this jsfiddle:
http://jsfiddle.net/P8hrN/
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
yAxis: [{
lineWidth: 1,
opposite: true
}],
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
I use "opposite: true" to display the y-axis on the right. But I want also the labels (numbers) to be on the right of the axis, not inside the series area.
At the moment, the numbers are on the left, so the series touches the "450" label.
Any ideas?
You need to set align:'left', so anchor-point for label will be on a left side. See demo and docs.
I'd like to update the red dashed line on this highchart plot using the text box and button below it. I'm stuck on how to get it to work. Right now I'm just trying to get the button press to move the line up slightly just so I can see if it's working.
http://jsfiddle.net/tZ8GM/
This is the function I'm trying to use to update it.
$("#setPtButton").click(function() {
Highcharts.setOptions({
yAxis: {
plotLines: [{
value : 68.1,
color : 'red',
dashStyle : 'longdash',
width : 2
}]
}
});
});
You should be using a combination of addPlotLine and removePlotLine.
$("#setPtButton").click(function() {
var chart = Highcharts.charts[0];
chart.yAxis[0].removePlotLine('setline');
chart.yAxis[0].addPlotLine({
value: $('#setPoint').val(),
color: 'red',
width: 2,
id: 'setline',
dashStyle : 'longdash'
});
});
Updated fiddle.
click: function() {
if (!hasPlotLine) {
chart.xAxis[0].addPlotLine({
value: 5.5,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
} else {
chart.xAxis[0].removePlotLine('plot-line-1');
}
hasPlotLine = !hasPlotLine;
}
Am trying to add and remove the plot lines on click event and I ended up with this eeror "Cannot read property xAxis of undefined"
DEMO
I assume what you would like to remove "old" plotLine and add new in clicked x value. So first of all I recommend to remove conditions, and only use remove/add plotline.
http://jsfiddle.net/FzNqA/8/
click: function () {
var chart = this.series.chart.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: this.x,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
}