I would like some help with this chart. If the series values are not 0.0, the minimum value of the chart is 0, and it's correctly on the bottom of the chart:
But if the values are all equal to 0.0, the y-axis line is shown in the middle of the chart:
I try to set
{min: 0,}
on the y-axis, but it doesn't work. Obviously I can't set a max value because I have a dynamic data. How can I solve this?
If you can't set a max, you can set a minRange
yAxis: [{ // Primary yAxis
min: 0,
minRange: 0.1,
http://jsfiddle.net/tZayD/
Related
I'm creating a column chart that has two series (Income and Expenses) in Highcharts. I would like to have no padding between each column and I would like to be able to set the maxPointWidth to a value.
I already tried setting the maxPointWidth to a value and setting the pointPadding to zero. But when I do that the columns have extra padding between each of the series.
plotOptions: {
series: {
grouping: true,
pointPadding: 0,
maxPointWidth: 32
}
}
I expected the columns to be adjacent to each other but instead the columns had even more space but the maxPointWidth did restrict the thickness of the columns to 32.
You can try to set also the groupPadding = 0 and borderWidth = 0:
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
maxPointWidth: 32,
groupPadding: 0
}
}
Note, that columns are equally spaced on the chart plot area and when you set fixed columns width then space between them has to be adjusted.
Demo:
https://jsfiddle.net/BlackLabel/5f614cjz/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding
https://api.highcharts.com/highcharts/series.column.borderWidth
I HV multi line chart, I want the shared tooltip to be at the top of the graph ( so that it doesn't covers up the space of graph) , but I want it to have fixed 'y'
And x coordinate to be Free.
So that user can hover over the graph and the tooltip comes at the top of that point ( x coordinate).
Is there a way where I can fix only the y coordinate of the tooltip position?
You can use the tooltip.positioner function. http://api.highcharts.com/highcharts/tooltip.positioner
tooltip: {
positioner: function (labelWidth, labelHeight, point) {
return { x: point.plotX, y: 15 };
},
shadow: false,
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.8)'
},
http://jsfiddle.net/nt9x5tjj/
The callback receives a point object that contains plotX and plotY positions. Fix the y value to some number and return point.plotX as the x value.
I am using Highcharts heatmap and would like to display one decimal place on the scale range. See image below. I would like to show 0.0, -5.0, -10.0, -15.0, -20.0.
I have increased the range of scale by adding "symbolHeight" to legend. See below code:
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 42,
symbolHeight: 360
}
You can format the Y-Axis decimals with using yAxis.labels.format.
For 0.0, -5.0, -10.0, -15.0, -20.0 ticks, you need to use minTickInterval
Just add this code;
yAxis: {
labels: {
format: '{value:.1f}'
},
minTickInterval: 5
}
Example: jsFiddle
I was able to display the decimal points by adding
labels: {
format: '{value:.1f}'
}
to colorAxis. See edited fiddle: https://jsfiddle.net/er1187/u7oax1ue/1/
I have some values between 0 and 1 that I want to show in a heatmap graphic in highcharts.
The gradient bar should be between 0 and 1, but it is bigger and when I select a cell in the graphic, the color does not match with the color in the gradient bar.
colorAxis: {
min: 0,
max: 1,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
tickPositions: [0, 0.5, 1]
}
http://jsfiddle.net/n13vuaja/
For values between 0 and 150 it works: http://jsfiddle.net/2p2bunnm/
but with values between 0 and 1, even adding the min: 0, max:1, does not match the cursor in the gradient bar with the color.
any idea how to make the gradient bar cursor select the proper color between 0 and 1?
Thanks!
This is a known bug with heatmaps. Currently the workaround seems to be removing the line
this.isXAxis = true;
in the colorAxis init function of the heatmap module (line 93 in heatmap.src.js).
I think it's a bug in highcharts. Their demo if scaled down to small value doesn't match the colorAxis correctly to the legend color (http://jsfiddle.net/3188gubh/).
E.g. 0 is not completely white on the legend, but is on the chart.
Without a code block stackoverflow doesn't let me post a link to jsfiddle :(
On a Highcharts heat map I specify the data in JSON format as follows:
var dataJson = [];
if (model.ActivityData != undefined) {
var index = 0;
if (model.ActivityData.length > 0) {
model.ActivityData.forEach(function(timeLineItem) {
dataJson.push({
x: $scope.getChartDate(timeLineItem.Date.split("T")[0]),
y: timeLineItem.IndicatorMeasure,
value: Math.round(timeLineItem.Amount * 100) / 100,
name: $scope.getChartDate(timeLineItem.Date.split("T")[0]),
});
});
}
}
"Value" is always between 0 and 1. I have added a tooltip showing "value" when hovering over a point.
I specify the colour stops as follows (it is
Orange: 0
White: 0.5
Green: 1
colorAxis: {
stops: [
[0, '#F9A847'],
[0.5, '#ffffff'],
[1, '#b1d4b1']
]
},
I would expect any values below 0.5 to be a shade of orange and any values over 0.5 to be a shade of green. However when the chart is rendered some values above 0.5 are orange.
Does Highcharts use "value" explicitly to set the colour and if so, why is it not respecting the specified colour tops. Or does highcharts adjust the colours by averaging (or something similar) to determine the colours.
Live demo at jsFiddle.
As you can see from the color axis, it extends from 0.4 to 0.7, which means that your middle color stop is actually as 0.55 in terms of axis values. The axis extremes is based on the data values.
So in order to make the axis extend from 0 to 1, like you probably expect, you need to set min and max. View jsFiddle.
colorAxis: {
stops: [
[0, '#F9A847'],
[0.5, '#ffffff'],
[1, '#b1d4b1']
],
min: 0,
max: 1
},