Here is my code - https://jsfiddle.net/rxqpt8u4/1/
var colors = Highcharts.getOptions().colors;
Highcharts.chart('container', {
chart: {
type: 'streamgraph',
marginBottom: 30,
zoomType: 'x'
},
yAxis: {
min:0
},
// Data parsed with olympic-medals.node.js
series: [
{
"name": "Austria",
"data": [
2, 3, 4, 5, 5, 6, 6, 6, 7
]
}]
});
Can't understand why values dont scales 1:1.
Instead of that, they scale 0.5:1.
Please advise.
The axes adapt to the data and they are independent of each other. To have the same scale on the axes set the same tickInterval, max and min properties:
events: {
load: function() {
var xAxis = this.xAxis[0];
this.yAxis[0].update({
tickInterval: xAxis.tickInterval,
max: xAxis.dataMax
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/289jtzp1/
Related
Let´s say you have an x-axis that goes [0, 3, 6, ...] and a y-axis that is like [0, 5, 10, ...].
Highcharts handles those values so that automatically, somehow a difference of 5 in y direction does not look bigger than a difference of 3 in x direction.
How can you change the distances between the values / make a 5 on the y axis appear as big as 5/3 of the change on the x axis? (so that p.e. a line from (0,0) to point (5,5) has a 45° angle)
Code example:
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
taken from demo
In the load event, you can calculate and adjust the height or width of the chart:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0];
// Adjust xAxis
this.setSize(
yAxis.height / (yAxis.max - yAxis.min) *
(xAxis.max - xAxis.min) + this.plotLeft + this.chartWidth -
(this.plotLeft + this.plotWidth),
null,
false
);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/64Lxutce/
or if you do not want to change the size, you can adjust one of the axis extremes:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0],
xAxisMax = xAxis.width /
(yAxis.height / (yAxis.max - yAxis.min)),
yAxisMax = yAxis.height /
(xAxis.width / (xAxis.max - xAxis.min));
if (xAxisMax < xAxis.max) {
this.update({
yAxis: {
max: yAxisMax - yAxis.min
}
}, true, true, false);
} else {
this.update({
xAxis: {
max: xAxisMax - xAxis.min
}
}, true, true, false);
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/w3byrL28/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Chart#update
https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I need to create a histogram with the data below, this is a sample of the data, the real object is much larger. I need the y-axis to be ‘Reads’ while the x-axis is a little more complex. The x-axis should be a range from 0-1, the bar on x-axis should be located corresponding to the ‘RankMetric’ variable. Is it possible to build a histogram like this with highcharts ? I’ve found this fiddle here but I don’t know how set up the x-axis and plot the bars in the correct positions. Any help is greatly appreciated, Thanks.
I can set the x-axis range with something like this, but how do I plot on the x-axis where according to the 'RankMetric' variable?
xAxis:{
min:0,
max:1,
tickInterval: 0.1,
crosshair: true
}
Data:
var obj = {
"Reads":1721745,
"Present":1,
"RankMetric":0.397851,
"organism_labels":"klebsiella_oxytoca"
},{
"Reads":66529,
"Present":1,
"RankMetric":0.609935,
"organism_labels":"staphylococcus_aureus"
},{
"Reads":45563,
"Present":1,
"RankMetric":0.505084,
"organism_labels":"legionella_longbeachae"
},{
"Reads":83471,
"Present":1,
"RankMetric":0.669884,
"organism_labels":"enterobacter_aerogenes"
}, {
"Reads":1309077,
"Present":1,
"RankMetric":0.688673,
"organism_labels":"pseudomonas_aeruginosa"
}
Data points needs to have x and y properties. Data should be sorted by x in ascending order. You could resolve this creating a parsing function that will allow you to meet the requirements. Example: http://jsfiddle.net/4xjq56bh/
$(function() {
var data = [{
"Reads": 1721745,
"Present": 1,
"RankMetric": 0.397851,
"organism_labels": "klebsiella_oxytoca"
}, {
"Reads": 66529,
"Present": 1,
"RankMetric": 0.609935,
"organism_labels": "staphylococcus_aureus"
}, {
"Reads": 45563,
"Present": 1,
"RankMetric": 0.505084,
"organism_labels": "legionella_longbeachae"
}, {
"Reads": 83471,
"Present": 1,
"RankMetric": 0.669884,
"organism_labels": "enterobacter_aerogenes"
}, {
"Reads": 1309077,
"Present": 1,
"RankMetric": 0.688673,
"organism_labels": "pseudomonas_aeruginosa"
}];
//data points needs to have x and y properties
Highcharts.each(data, function(point, i) {
point.y = point.Reads;
point.x = point.RankMetric;
});
//data should be sorted by x in ascending order
data = data.sort(function(a,b){
return a.x - b.x;
});
$('#container').highcharts({
series: [{
data: data,
type: 'column',
pointPadding: 0,
groupPadding: 0
}],
xAxis: {
min: 0,
max: 1,
tickInterval: 0.1,
crosshair: true
}
});
});
I have the a stacked column chart with a logarithmic scaled y axis (JSFiddle here, adapted from a basic demo chart)
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
type:'logarithmic',
min: 0.3, // I WANT THE Y-AXIS TO START AT 0.3
min: 25, // I WANT THE Y-AXIS TO END AT 25
endOfTick:false,
maxPadding:0,
tickInterval:0.1,
},
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
data: [5, 3, 4, 7, 2]
}, {
data: [2, 2, 3, 2, 1]
}, {
data: [3, 4, 4, 2, 5]
}]
});
});
I worked on all the options suggested on this Stackoverflow page to set the exact minimum and maximum y-axis values but without success.
What can I do to force the y-axis chart to start and end at the values I want?
As in the question you found, use Sebastian's answer, with tickPositioner. In fact, extremes are proper when setting startOnTick and endOnTick to false, just labels are not rendered. In that case use tickPositioner, for example:
tickPositioner: function(min, max) {
var ticks = this.tickPositions;
ticks = $(ticks).filter(function(i, tick) {
return tick > min && tick < max;
});
ticks.slice(0, 0, min);
ticks.push(max);
return ticks;
}
And live demo: http://jsfiddle.net/99w72efv/5/
There is no property endOfTick -> you're looking for endOnTick
Example:
http://jsfiddle.net/99w72efv/4/
Reference:
http://api.highcharts.com/highcharts#yAxis.endOnTick
I'm trying to dynamically update a C3.js line chart using a function that get a set of x and y values from a database. The function I'm trying to use to insert the data is:
function insertGraph(yAxis, xAxis, Header) {
setTimeout(function () {
console.log("starting");
chart.load ({
bindto: "#graph",
xs: {
'y':'x'
},
columns: yAxis, xAxis
});
}, 100);
}
The data being passed into the function looks like this:
yAxis:
["y", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
xAxis:
["x", 0, 131.35, 26971.3, 27044.75, 27351.4, 27404.483333333334, 27419.416666666668, 33128.96666666667, 33549.13333333333, 34049.48333333333, 77464.26666666666, 77609.71666666666, 174171.85, 259166.98333333334]
Header:
MakeModeChange #just a string
I know I'm doing something fundamentally wrong here, but any help would be appreciated
Just in case anyone needs it I managed to figure out my issue. It's all in how you do the "columns" portion (it need to be bound in []). Here's the fixed code just in case:
function insertGraph(yAxis, xAxis, Header) {
setTimeout(function () {
chart.load ({
bindto: "#graph",
xs: {
'y':'x'
},
columns: [
yAxis,
xAxis
]
});
}, 100);
}
highcharts would fit perfectly if not for one "but". The strip chart goes behind the axis. The line graph is beyond the axis numbers(50, 100, 150, 200). Watched others but have not found where you can easily stylize the behavior of the graph by accessing its axis
chart like this
Simply disable margins for chart, then play with yAxis.offset to move labels to the right: http://jsfiddle.net/Ywr3L/33/
$('#container').highcharts({
chart: {
marginLeft: 0,
marginRight: 0
},
xAxis: {
type: 'datetime'
},
yAxis: {
offset: -120
},
series: [{
data: [ 1, 2, 3, 2, 3, 2, 1, 2, 3, 2 , 1, 2, 3, 4],
type: 'areaspline'
}]
});
Note: without extra coding you can't start series shape before starting of gridlines.