So I have this solidgauge with options:
{
pane: {
startAngle: 0,
endAngle: 360,
},
}
But I want to add an option to have the gauge the other way round, so I went for:
{
pane: {
startAngle: this.inversed ? 360 : 0,
endAngle: this.inversed ? 0 : 360,
}
}
With this.inversed set to true, the animation goes well, but unfortunately, at the end I get an error:
Error: <rect> attribute height: A negative value is not valid. ("-298.45130209103036")
It feels like a bug because I don't change anything else.
Can someone help me on reversing the angle direction of my solidgauge?
Cheers
I've reported a bug, which you can track here: https://github.com/highcharts/highcharts/issues/17361
As a temporary solution you can switch to the last working Highcharts version - 9.2.2 or set series.clip to false, which solves the problem of disappearing pane.
Demo:
https://jsfiddle.net/BlackLabel/o53r01ce/
Related
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,
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
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;
}
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!
I am having trouble getting the marker radius working with high stock charts. I have been trying to get this working using both plot options, and a setting against the series directly:
plotOptions: {
series: {
marker: {
radius: 90
}
}
},
(or see http://jsfiddle.net/zMH7Q/).
Changing other attributes such as the marker shape works fine, but any changes to the radius seem to be ignored. I have tried setting this in both plot options, and directly against the series but to no avail. It is definately mentioned in the documents (http://api.highcharts.com/highstock#plotOptions.area.marker.radius) so should work unless I am doing something stupid (fairly likely).
Any help would be appreciated :-)
David
In HighStock, unlike HighCharts, the default for marker is enabled: false, this is because the data tends to be very dense and markers wouldn't add much value to the data comprehension of the user.
You need to modify your code to:
plotOptions: {
series: {
marker: {
enabled: true,
radius: 90
}
}
},
for the markers to show up.
EDIT: I will leave the above up in case someone comes across this and needs it. What David really wants to know is whether the series symbol during hover can be changed. The code for that is:
plotOptions: {
series: {
marker: {
lineColor: null,
states: {
hover: {
fillColor: 'white',
radius: 10
}
}
}
}
}
Which is straight from the Highcharts API reference at http://api.highcharts.com/highcharts#plotOptions.scatter.marker.states.hover.radius