I have a web site where I am using the HighCharts library which is excellent - http://weather.crowe.co.nz
The charts are working properly but I want to have a X-Axis label like the following
12 and on a new line am
But I would like to control the distance that the \n creates. ie I want the am to the closer to the 12.
So my question is how can I control the vertical space between the 12 and the am? Or should I try to draw the the value manually using the highcharts drawing routines?
In case you don't see the issue the am or pm it too close to the bottom border as you can see in this image
Sorry image not displaying so please click here to see it
To tighten up the space between the line returns in your x-axis labels, set useHTML: true and then define lineHeight in the style attribute.
xAxis: {
categories: ['Jan<br />here', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
useHTML: true,
style: {
lineHeight: '120%' // set this to whatever value is needed
}
}
},
Here's an example fiddle with this adjustment: http://jsfiddle.net/brightmatrix/anw8p884/1/
I hope this is helpful for you.
(The weather dashboard on your website is very nicely done, by the way! I particularly like how you delineated between the actual and forecast values.)
Related
Would love some help here with highcharts,i have attached an image i want to accomplish 2 things here
First: Is it possible to place the data of the yAxis in this case a day between 2 plotlines and the datalabel in between those 2 lines instead of getting crossed in the middle by it? For example i want the 30th of April under that line and the datalabel above that line as well positioned according to the day
Second: How can i change the color of the numbers to black when the color is that light green, it makes it hard to read.
You can set yAxis.type as category and use formatter to imitate dates.
Use dataLabels.formatter to change a color depending on a point value.
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.color === '#FF00FF') {
return '<span style="color: orange">' + this.y + '</span>';
}
return this.y;
}
}
}],
yAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/qxfa9b0c/1/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter
I am adding data from an API, and have a nice thin cross hair when not defining categories:
chartOptions.series[0]data = [1,2,4,5,7,8];
but when I define categories as well:
chartOptions.series[0]data = [1,2,4,5,7,8];
chartOptions.xAxis.categories = ['jan','feb','march','april','may','june']
my cross hair is a thick green band:
I would like to understand why the cross hair is changing like that.
Thanks!
In the Highcharts API we can read:
width: number
The pixel width of the crosshair. Defaults to 1 for numeric or datetime axes, and for one category width for category axes.
So, change the width property if you want to have different result:
xAxis: {
categories: ['jan', 'feb', 'march', 'april', 'may', 'june'],
crosshair: {
width: 1,
color: '#000'
}
}
Live demo: http://jsfiddle.net/BlackLabel/ps18y3v5/
API Reference: https://api.highcharts.com/highcharts/xAxis.crosshair.width
i am quite new to Highcharts and i am a little bit stucked.
I am trying to add a average line (spline) to each bar (column) in a combination chart. The average line shall not be displayed in the middle, it sall be displayed over the related bar, as i tried to show in this picture.
picture to explain
Thanks a lot!
You can add new xAxis that you can use to add your spline series in right places.
xAxis: [{
min: 0,
max: 3,
categories: ['Jan', 'Feb', 'Mar', 'Apr'],
tickPixelInterval: 0
}, {
categories: true,
min: 0,
max: 19,
visible: false
}],
In this case I am making the second xAxis much more dense. Here you can see how both of my axes looks here:
http://jsfiddle.net/feqq1eog/1/
To hide second axis you can use visible: false parameter.
Here you can find an example how it can work:
http://jsfiddle.net/feqq1eog/4/
i have a simple line highchart with single "null" values.
I know, that I can connect the line with connectNulls: true.
Question:
Is it possible to mark the connection in a separate color or with a dotted line?
FIDDLE:
http://jsfiddle.net/SebastianH4/xpjqou95/1/
Yes, it is possible.
See here: http://jsfiddle.net/mtg6bd0o/3/
You can obviously use the trick described in brightmatrix's answer, but here's another solution:
Highcharts provides us a pretty simple to use Renderer API which lets us do some cool stuff such as drawing shapes, texts and paths (In general, svg elements).
Then using some chart manipulations together with the renderer, we can achieve this kind of goal.
var chart = $('#container').highcharts();
var plotLeft = chart.plotLeft;
var plotTop = chart.plotTop;
for (var i = 0; i < data.length; i++) {
var path = [];
if (data[i] == null) {
var p1 = chart.series[0].points[i - 1],
p2 = chart.series[0].points[i + 1];
p2 = p2 == undefined ? p1 : p2;
path.push('M');
path.push(p1.plotX + plotLeft, p1.plotY + plotTop);
path.push('L');
path.push(p2.plotX + plotLeft, p2.plotY + plotTop);
}
var line = chart.renderer.path(path)
.attr({
'stroke-width': 2,
stroke: Highcharts.getOptions().colors[0],
dashstyle: 'ShortDash'
})
.add();
}
I'll explain:
At first, we use 2 variables plotleft and plotTop which hold the values for the charts actual position relatively to the top and left coordinate.
Then I iterate the data, such that in each iteration I create a path array which has the initial point (where the line starts, comes after 'M'), and the end point coordinate (comes after 'L').
This is a standard way to create paths using SVG.
What actually happens is that for each null point, I take the previous and the next points's coordinates and push them to path.
Here I iterate some dummy data, it could obviously be retrived from the series itself.
Then, after I have the required coordinates, I can draw the line itself using the Renderer API (Reference: http://api.highcharts.com/highcharts#Renderer)
Working fiddle: http://jsfiddle.net/mtg6bd0o/3/
I found another question here on Stack Overflow that discusses a similar situation where a user wanted to color different segments of the same line (Highcharts: change line options mid-way through a line) as well as a Highcharts module that allows for multicolor series (http://blacklabel.github.io/multicolor_series/).
However, the crux of this is that those points need to have a value; they cannot be null. I tried adding a color to your null points, but enabling connectNulls ignored that setting and overrode it with the series default.
If this is a stand-alone chart that would not be fed random or updated data, you could plot a second series that sits behind the first and only has points where the first has nulls. Here's an example I worked up:
$(function () {
$('#container').highcharts({
title: {
text: 'LineWithNulls'
},
subtitle: {
text: 'How can I connect the the line in a different color or with a dotted line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [4, 5, 1, { y: null, color: 'red'}, 3, 4, 2, null, 5, 6],
connectNulls: false, zIndex: 2
}, {
/* differently formatted series for "null" values in first series
prevent from showing up in legend and prevent series from showing in tooltip on mouse over */
data: [null, null, 1, 2, 3, null, 2, 3.5, 5, null],
connectNulls: false, color: 'red', marker: {enabled: false}, dashStyle: 'dash', zIndex: 1, showInLegend: false, enableMouseTracking: false
}]
});
});`
You can also see the fiddle here: http://jsfiddle.net/brightmatrix/xpjqou95/3/
Please let me know whether this is helpful!
If I have a Highcharts bar or column chart that has a data series with an array of all zeroes, the y axis tick label displays in the center of the y axis, along with an extra y axis. I've experimented with the tick placement and min values but these dont seem to work in the case of this peculiar set of data. see http://jsfiddle.net/davidpmcintyre/mepd17tn/
Here's the highcharts code snippet:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr' ]
},
series: [{
data: [0, 0, 0, 0]
}]
});
});
Assuming (given requirements of your chart):
All data will be positive
You always want to start from 0 on the y-axis
The following code will allow you to left-align your y-axis, and also specify how much of the y-axis you want to show in minimal cases (JSFiddle):
yAxis: {
min: 0,
minRange: 1
}
This will still allow you to have larger ranges on the y-axis as it only kicks in when the value range is less than one. This in turn means you do not have to check your data before setting any values.