I draw a coordinate space with the following code (JSBin). What I don't understand, is why (-1.7, 0) isn't at the origin? It seems that the origin represents (-1.675, -0.25) at the moment, which is not what I want.
<!DOCTYPE html>
<html>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:400px;margin:1.5em 1em;"></div>
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
type:'area'
},
credits: false,
legend: false,
title: { text:"" },
tooltip: {},
plotOptions: {
series: {
color:'rgba(156,156,156,.9)',
fillColor:'#ffffff',
lineWidth:1,
marker: {
enabled:false,
states: {
hover: {
enabled:false
}
}
}
}
},
xAxis: {
tickmarkPlacement:'on',
categories:[-1.7, -1.65, -1.6, -1.55, -1.5, -1.45, -1.4, -1.35, -1.3]
},
yAxis: {
title: { text: "x 10000", rotation: 0, y: 0, x:10, margin: -40, align: 'high'},
tickLength: 10,
tickWidth: 1,
lineWidth: 1,
tickmarkPlacement:'on',
gridLineColor:'#ffffff',
categories:[0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]
},
series:[{
data:[[1,1],[1,3],[2,3],[2,1],[1,1]]
}]
});
</script>
</body>
</html>
By default Highcharts automatically calculates extremes for both axes. If there's no value on the plot which is close to first category (1.7 in your example) it's not used to set the minimum extreme. You can use min and max properties to set extremes manually:
xAxis: {
tickmarkPlacement:'on',
categories:[-1.7, -1.65, -1.6, -1.55, -1.5, -1.45, -1.4, -1.35, -1.3],
min: 0,
max: 8
};
I think using categories in this case is a bad idea. Categories are only an information for Highcharts how to format axis labels, data labels, tooltip etc. The actual y axis values for categories are their indexes in the array. So if you create categories like this:
categories:[-1.7, -1.65, -1.6, -1.55, -1.5, -1.45, -1.4, -1.35, -1.3]
they'll be treated as Strings and their numeric values are 0, 1, 2, 3...
That means when you create a point with this options: {x: 0, y: 5} it'll be above -1.7 category - it becomes very confusing.
You should manipulate numeric values on your axes using the following options (not categories array):
https://api.highcharts.com/highcharts/yAxis.min
https://api.highcharts.com/highcharts/yAxis.max
https://api.highcharts.com/highcharts/yAxis.tickInterval
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
I have a page with a variety of select menus. The select options are used in an ajax call to build a Highcharts bar graph. Every time a filter changes, the graph gets recreated. I did this instead of updating the series data, because in the past I have noticed that destroying and recreating was more efficient than updating.
I want images to show on the x-axis, so I used a nice little trick of creating two x axes, used formatter to return an image on the first axis, and linked the second axis to the first. This works on first refresh. However, every time the chart gets recreated thereafter, the image disappears. I checked my console and I don't see any errors.
And idea of what's going on here?
/**
* Whenselection changes
*/
$(document).on('change', '.filter', function(){
getChartData($params)
})
});
/**
* API call to get data that will populate charts.
* #param {obj} params
*/
function getChartData(params)
{
//Get chart data
$.ajax({
url: apiURL + '/chartdata/',
data: params,
dataType: 'json',
cache: false,
success: function(data) {
initChart(data[0]);
}
});
function initChart(chartData)
{
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
backgroundColor: 'transparent', //#E8EAF6',
height: '23%',
marginLeft: 35
},
title: {
text: null
},
xAxis: {
categories: [category1, category2],
lineColor: 'transparent',
min: 0,
tickColor: 'transparent',
title: {
text: null
},
labels: {
x: -35,
useHTML: true,
overflow: 'allow',
formatter: function () {
if(this.isFirst == true)
return '<img src="../assets/img/nat-jr-grad-gold.png"><br/>';
else
return '<img src="../assets/img/nat-jr-grad-purple.png"><br/>';
}
}
},
yAxis: {
min: 0,
title: {
useHTML: true,
text: null
},
labels: {
enabled: false
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
},
legend: {
enabled: false
},
series: [{
name: category1,
data: [{name: category1, y:Math.round(chartData.p_grad_nongap * 100), {y: null}],
}, {
name: category2,
data: [null, {name: category2, y: Math.round(chartData.p_grad_gap * 100)}]
}]
});
}
I reproduced your problem on a simplified example: http://jsfiddle.net/BlackLabel/sm2r684n/
For the first time, the image is loaded asynchronously and the chart does not take it into account when calculating the margins. Every next time the result is different, so you should wait until the picture is loaded:
var img = new Image();
img.onload = function() {
initChart();
}
img.src = "https://www.highcharts.com/samples/graphics/sun.png";
Live demo: http://jsfiddle.net/BlackLabel/m09ok2cg/
I think ppotaczek had the cortrect root cause of the problem; the image is loaded asynchronously and the chart does not take it into account when calculating the margins. His suggestion used setTimeout function to continuously redraw the graph, which is rather inefficient. My work-around for this was to just add the images as avg elements using chart.renderer after the chart was created.
/* Render X-Axis images */
chart.renderer.image('../assets/img/img1.png', 0, 40, 32, 36)
.css({
class: 'icon-img',
zIndex: 10
})
.add();
chart.renderer.image('../assets/img/img2.png', 0, 130, 32, 36)
.css({
class: 'icon-img',
zIndex: 10
})
.add();
As shown in screenshot I need my crosshair to move across the points but the tooltip value is snap to next value even the crosshair is not reached that point.I am facing an issue in highcharts. I want when I hover around the chart then crosshair should reflect the value of current point which is being hovered. As shown in code currently its changing values in mid way which is not reflecting right value as respect to crosshair.
Highcharts.chart('container', {
tooltip: {
snap: -1,
crosshairs: true
},
xAxis:{
crosshair: {
interpolate: true,
color: 'gray',
snap: false
},
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
},
series: [{
marker: {
states: {
hover: {
enabled: false
}
}
},
step:'left',
data: [0, 1, 0, 1, 0, 1, 0]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
It's because you set the xAxis.crosschair.snap equal to false. Actually, you can remove the snap: false definition, because it's set to true by default. Then it should behave just like you want.
[EDIT]
If you would like to show current crosschairs xAxis value, it's not implemented in Highcharts, but Highstock has its own xAxis.crosschair.label property which serves the feature you need. Here is the example and documentation:
http://jsfiddle.net/hzcuf68y/
https://api.highcharts.com/highstock/xAxis.crosshair.label
If you don't want to change the Highcharts for Highstock, you can refer to this demo, where the crosschairs and labels are rendered manually: http://jsfiddle.net/mr1c03ae/
Live example: https://jsfiddle.net/n7bawfcg/
API Reference: https://api.highcharts.com/highcharts/xAxis.crosshair.snap
After alot of research I got the solution just posting here if someone may face the same problem. http://jsfiddle.net/F4e2Y/70/
function interpolate(data) {
var resolution = 0.1,
interpolatedData = [];
data.forEach(function(point, i) {
var x;
if (i > 0) {
for (x = data[i - 1].x + resolution; x < point.x; x += resolution) {
interpolatedData.push({
x: Highcharts.correctFloat(x),
y: Highcharts.correctFloat(data[i - 1].y),
});
}
}
interpolatedData.push(point)
});
return interpolatedData;
}
var data = [{
x: 0,
y: 1
}, {
x: 2,
y: 0
}, {
x: 4,
y: 1
}, {
x: 6,
y: 1
}, {
x: 8,
y: 0
}, {
x: 10,
y: 1
}];
Highcharts.chart('container', {
chart:{
zoomType: 'x',
},
tooltip: {
shared: true
},
xAxis: {
crosshair: true
},
series: [{
step:'left',
data: interpolate(data),
}]
});
<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: 300px; height: 300px; margin: 1em"></div>
My requirement is to create a spiderweb highchart with values on each axis where each axes have different scales.Is it possible? I have attached a same output of my requirement.
Use multiple yAxis and assign them to the separated panes with startAngle.
Parser
var colors = Highcharts.getOptions().colors,
each = Highcharts.each,
series = [{
yAxis: 0,
data: [10, 20, 30]
}, {
yAxis: 1,
data: [1, 2, 3]
}, {
yAxis: 2,
data: [4, 2, 1]
}, {
yAxis: 3,
data: [5, 1, 3]
}, {
yAxis: 4,
data: [2, 3, 4]
}],
yAxis = [],
panes = [],
startAngle = 0;
each(series, function(serie, i) {
yAxis.push({
pane: i,
showLastLabel: true,
gridLineWidth: i === 0 ? true : false,
labels: {
useHTML: true,
formatter: function() {
return '<span style="color:' + colors[i] + '">' + this.value + '</span>';
}
}
});
panes.push({
startAngle: startAngle
});
startAngle += 72;
});
Chart configuartion
$('#container').highcharts({
/*
chart options
*/
pane: panes,
yAxis: yAxis,
series: series
});
Example:
http://jsfiddle.net/6jmqb1r8/
I believe Sebastian Bochan's answer is rock solid due to his suggestion of the pane attributes. However, I was tinkering around with another method and wanted to share it with you and the community.
My solution makes use of "dummy" series, which are series that the user does not see or interact with, but can help with customized features such as your labels.
I added six "dummy" series that contain the labels for each spoke of the spider chart. The first, for the "zero" value, is blank, but the others will show data labels for the first, second, third, etc. points along the spoke.
After the chart is drawn, I use the addSeries() function to add these "dummy" series to the chart:
// Add "dummy series to control the custom labels.
// We will add one for each spoke, but first will always be
// overriden by y-axis labels; I could not figure out how to
// disable that behavior.
// The color, showInLegend, and enableMouseTracking attributes
// prevent the user from seeing or interacting with the series
// as they are only used for the custom labels.
var chart = $('#container').highcharts();
var labelArray = [
['','1','2','3','4','5'],
['','j','k','l','m','n'],
['','one','two','three','four','five'],
['','u','v','w','x','y'],
['','a','b','c','d','e']
];
for (var i = 0; i<=5; i++) {
chart.addSeries({
name: 'dummy series #' + i + ' for label placement',
data: [
{ name: labelArray[0][i], y: i },
{ name: labelArray[1][i], y: i },
{ name: labelArray[2][i], y: i },
{ name: labelArray[3][i], y: i },
{ name: labelArray[4][i], y: i }
],
dataLabels: {
enabled: true, padding: 0, y: 0,
formatter: function() {
return '<span style="font-weight: normal;">' + this.point.name + '</span>';
}
},
pointPlacement: 'on',
lineWidth: 0,
color: 'transparent',
showInLegend: false,
enableMouseTracking: false
});
}
A few items to note:
lineWidth: 0 and color: 'transparent' makes the "dummy" series lines invisible
showInLegend: false prevents them from showing up in the legend
enableMouseTracking: false prevents the users from interacting with them
Here is the fiddle that shows how this works: http://jsfiddle.net/brightmatrix/944d2p6q/
The result looks like this:
Just on quirk that I noted in my comments: I could not figure out how to override the labels on the first spoke (at the 12-o-clock position). If I set the y-axis labels to "false," it refused to show anything, even the custom data labels I set in the "dummy" series. Therefore, I suggest that your first spoke be the numerical labels in your example.
I realize this is perhaps a more complicated route, but I hope it's helpful to you and others in some way.
The default highstock chart has height = 400px.
How can height chart be set for auto size based on chart axis and its sizes ?
See the example bellow, the navigation bar is over the volume panel.
http://jsfiddle.net/BYNsJ/
I know that I can set the height for the div but I have a solution that insert/remove axis/series dynamically in the chart and would be nice an auto height chart.
The example is the same Candlestick/Volume demo from Highchart site, but without height property in the div container.
// 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: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
Regards.
here is one example which is resize chart according screen.
http://jsfiddle.net/davide_vallicella/LuxFd/2/
Just don't set the height property in HighCharts and it will handle it dynamically for you so long as you set a height on the chart's containing element. It can be a fixed number or a even a percent if position is absolute.
http://api.highcharts.com/highcharts/chart.height
By default the height is calculated from the offset height of the containing element
find example here:- http://jsfiddle.net/wkkAd/149/
#container {
width:100%;
height:100%;
position:absolute;
}
hey I was using angular 2+ and highchart/highstock v.5, I think it will work in JS or jQuery also, here is a easy solution
HTML
<div id="container">
<chart type="StockChart" [options]="stockValueOptions"></chart>
</div>
CSS
#container{
height: 90%;
}
TS
this.stockValueOptions = {
chart: {
renderTo: 'container'
},
yAxis: [{
height: '60%'
},{
top: '65%',
height: '35%'
}]
}
Its working, and a easy one. Remove chart height add height in '%' for the yAxis.
Highcharts does not support dynamic height, you can achieve it by $(window).resize event:
$(window).resize(function()
{
chart.setSize(
$(document).width(),
$(document).height()/2,
false
);
});
See demo fiddle here.
You can set chart.height dynamically with chart.update method.
http://api.highcharts.com/highcharts/Chart.update
function resizeChartFromValues (chart) {
const pixelsForValue = 10
const axis = chart.yAxis[0]
chart.update({ chart: { height: (axis.max - axis.min) * pixelsForValue } })
}
const options = {
chart: {
events: {
load () {resizeChartFromValues(this)}
}
},
series: [{
data: [30, 70, 100],
}]
}
const chart = Highcharts.chart('container', options)
setTimeout(() => {
chart.series[0].setData([10, 20, 30])
resizeChartFromValues(chart)
}, 1000)
Live example: https://jsfiddle.net/a97fgsmc/
I had the same problem and I fixed it with:
<div id="container" style="width: 100%; height: 100%; position:absolute"></div>
No special options to the chart. The chart fits perfect to the browser even if I resize it.