When creating a semicircle angular gauge with highcharts, I always get empty space above the gauge using the following pane settings:
....
pane: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%']
...
}
...
Here's an example: http://jsfiddle.net/eM8A7/
Reducing the height of the container div just makes the gauge smaller, but leaves the space. Tested this with Chrome and IE.
Is there a way to remove the empty space or am I attempting this incorrectly?
You need to set size for pange: http://jsfiddle.net/eM8A7/1/
pane: {
startAngle: -90,
endAngle: 90,
size: '150%',
center: ['50%', '100%'],
}
It's also a good idea to disable margins:
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
margin: [0,0,0,0]
},
after I tried to modify the margin property, I also found the 'spacing' property could also be helpful:
spacing:
The distance between the outer edge of the chart and the content, like title, legend, axis title or labels. The numbers in the array designate top, right, bottom and left respectively. Use the options spacingTop, spacingRight, spacingBottom and spacingLeft options for shorthand setting of one option. Defaults to [10, 10, 15, 10].
links here
In addition to the answer from #pawel-fus, I got the desired settings using height in css
#container {
height: 300px;
}
Related
I have a project using Highcharts 5 . I'm trying to get the chart labels on opposite sides of the donut graph, aligned straight left and straight right on each side, with the connectors spanning the distance appropriately.
Attached is the comp of what it should look like. Any thoughts on how to achieve this?
Thanks!
You can create the legend manually (html label and connector line with dot) using renderer:
var points = this.series[0].points,
renderer = this.renderer;
points.forEach(function(point) {
var labelOptions = point.options.label;
if (labelOptions) {
// text
renderer.text(labelOptions.text, labelOptions.x, labelOptions.y - 30, true).add();
// connector
var path = ['M', labelOptions.x, labelOptions.y].concat(labelOptions.connector.path);
renderer.path(path).attr({
stroke: 'gray',
'stroke-width': 1,
}).add();
// dot
renderer.circle(labelOptions.x, labelOptions.y, 3).attr({
fill: 'gray',
'stroke-width': 1,
}).add();
}
});
Options:
{
name: 'Microsoft Internet Explorer',
y: 56.33,
label: {
x: 400,
y: 100,
connector: {
path: ['l', -50, 0, 'l', 0, 100]
},
text: "<div class='label'><img src='https://wordpress.highcharts.com/blog/wp-content/uploads/2017/08/28160952/highcharts_logo.png' width='30' height='30'></img><div>Label text in HTML</div></div>"
}
}
Live working example (one label created): http://jsfiddle.net/kkulig/wdtpyof1/
This demo is only a good starting point. You should create your own mechanisms responsible for positioning labels.
API reference: http://api.highcharts.com/class-reference/Highcharts.SVGRenderer
This is solution for your issue
you can customize the connectors and get the chart labels on opposite sides of the donut graph.
http://jsfiddle.net/nmtri1101/ogfbxfqd/2/
Code jsfiddle :)
Using Highstock or Highcharts, I want my yAxis label on the top. What I don't want, is a varying margin between the left border of the chart and the beginning of the grid lines.
If you take a look at the following fiddle:
JSFiddle
Relevant part is:
yAxis: {
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
}
This is almost correct, but the offset margin is taken from the label width. If I set offset: -41 instead, it looks exactly right. The problem is, that the -41 is due to the rendered length of the text. If I change the text to something of a different length, the label is positioned wrongly again.
Is there any possibility to make sure, that the positions are always "correct" in my above definition of correct, regardless of the text length?
Screenshot, left part is wrong, right part is correct:
I think that you can use text-anchor property to style your title. Here you can find more information about text-anchor property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
title: {
align: 'high',
text: 'Rainfall (mm)',
style: {
'text-anchor': 'start'
},
rotation: 0,
y: -10,
x: -25
},
I think that you need to use chart.marginLeft parameter as well. It will give you a chance to set specific left margin for your chart. Here you can find information about it.
http://api.highcharts.com/highcharts#chart.marginLeft
You may also use xAxis.labels.reserveSpace parameter to turn off reserving space for labels: http://api.highcharts.com/highcharts#xAxis.labels.reserveSpace
Here you can find live example how your chart can work with this options:
http://jsfiddle.net/Ljwp7694/
Kind regards,
Hi I'd like a 1px gray line in between each horizontal bar.... (keeping the bars the same thickness)
http://jsfiddle.net/gpaosxwe/1/
I've had a brief try of
grid
and
tick
though I might have overlooked something...
You can do this with the following combination of properties:
categories:[],
gridLineWidth:1,
tickInterval:1,
tickmarkPlacement:'between',
(tickmarkPlacement is key, which only works for categorized axes)
Example:
http://jsfiddle.net/jlbriggs/gpaosxwe/6/
References:
http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
http://api.highcharts.com/highcharts#xAxis.gridLineWidth
http://api.highcharts.com/highcharts#xAxis.gridLineColor
http://api.highcharts.com/highcharts#xAxis.tickInterval
What you are looking for is borderWidth, pointPadding and groupPadding. You could do something like :
plotOptions: {
bar: {
borderWidth: 1, //Define a border of 1px to each bars
pointPadding: 0, //Define space between two bars
groupPadding: 0, // Define space between each value groups
...
},
...
}
See JSFiddle here.
I have a problem of rendering legends for 3d scatter charts with different symbol sizes - see http://jsfiddle.net/YyV6x/4/
The legend takes the same sizes of symbols as in the main chart and the positioning of legend items is completely off. I tried forcing the legend symbols to be the same size:
$(chart.series).each(function(){
this.legendSymbol.attr('width',8);
this.legendSymbol.attr('height',8);
});
Unfortunately, it also shifts symbol X and Y coordinates - see http://jsfiddle.net/HB53K/.
How can I fix this?
Thanks
You could do a translate on each chart.series to move them into the correct position before adjusting the width and height. Like this (JSFiddle example):
$(chart.series).each(function(){
this.legendSymbol.translate((this.legendSymbol.width/2), ((this.legendSymbol.height/2)-4));
this.legendSymbol.attr('width',8);
this.legendSymbol.attr('height',8);
});
It does not fix the spacing that is left over between legend items from the original sizes, but at least each item is in position for their legend text.
There may be some more elegant ways to solve this.
You can use different solution: set default marker for series, but for each point change radius: http://jsfiddle.net/HB53K/5/
Series example:
{
name: 'Drinking out',
data: [
{
y: 5,
marker: {
radius: 19
}
},{
y: 8,
marker: {
radius: 19
}
},{
y: 6,
marker: {
radius: 19
}
}
],
marker: {
symbol: 'square',
//radius: 19 //default value
}
}
Reported to our developers as enhancement.
https://github.com/highslide-software/highcharts.com/issues/3275
I am using markers in my charts and using point chart only. Now when I am using radius to 10 then point starts from given xvalue - 5 and spans till xvalue + 5. I want point to start from xvalue and spans till xvalue + 10.
Actually left most points are going beyond chart's left extreme and that looks bad.
here is the fiddle:
http://jsfiddle.net/v3tP5/
marker : {
enabled : true,
radius : 10,
symbol: 'square'
}
I think instead of changing the location of each point, this solution will work better:
For your fiddle in the comment, add yAxis label config like this [Link Here]:
yAxis: {
offset: 20,
labels: {
align: 'right',
x: 0,
y: 3
}
},
And for the fiddle in your question, a config like this would look pretty nice [Link Here]:
yAxis: {
offset: 8,
labels: {
align: 'right',
x: -3,
y: 3
},
showLastLabel: true
},
Hopefully this will work for what you're trying to do. If there are other configs you would like to add or if you have other questions, I will try to help!