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
Related
The space for xAxis generally is rendered dynamically by the Highcharts library and add the ellipsis in the correct place, making it display from the start and cutting it when it stop displaying it on the graph with some ellipsis.
When I try to change that space to not render dynamically, the property marginBottom does it,but it stops picking up when the text should start displaying and the start of the text is cutted from the down of the graph. Is there a way to render correctly the text at the bottom from the highcharts? I Do need it to be rotate 270 degrees, and not let the auto rotate work, and don't want to collapse more part of the graph just for displaying the text.
Here is a sample when that happes:
Highcharts.chart('container', {
chart: {
height: 350,
spacingBottom: 0,
marginBottom: 50,
type: "column"
},
series: [{
name: 'Total',
data: [1,2,3,4,5]
}],
xAxis: {
categories: ["very long name to test if the characters are rigth and cropped",
"Not so long but long enough", "I still am long and out of the screen",
"lets see how is cropped", "cropped", "crop"],
labels: {
rotation: 270
}
}
});
Sample fiddle with marginBottom : https://jsfiddle.net/ragmar/6ru4hze3/
If you remove the marginBottom, even the legend move down a bit.
It is possible to do this behavior? even including some css?
Thanks in advance
To make it work the way you want, you have to make some modifications in Highcharts core. For example you can do not use marginBottom option, but set fixed value as a commonWidth variable in renderUnsquish method:
if (attr.rotation) {
commonWidth = (
maxLabelLength > chart.chartHeight * 0.5 ?
40 : // changed from 'chart.chartHeight * 0.33'
maxLabelLength
);
if (!textOverflowOption) {
commonTextOverflow = 'ellipsis';
}
}
Live demo: https://jsfiddle.net/BlackLabel/moL1tw6c/
I have a highstock chart with a scatter series that has overlapping points. The X values are identical but the Y values have slight variations. Because the variations are small the overlap is not exact but is still difficult for the user to distinguish.
When a scatter point is clicked / tapped I want to identify all data points that the mouse pointer / finger touches. However it seems like Highcharts will only raise a click event for the point on top of the stack. There are several suggestions online for iterating over all data points and finding those with matching Y values, however in my case I would need to apply some fuzzy logic and try and select points that look to the user like they're overlapping, based on the size of the marker and the height of the chart and this seems like a move in the wrong direction.
Is there anything within Highcharts I can use to find all the points the user interacted with?
JS Fiddle: http://jsfiddle.net/f22tq4t2/1/
Highcharts.stockChart('container', {
series: [{
type: 'scatter',
name: 'Demo scatter overlap',
data: [{x: 1500052112000, y: 5}, {x: 1500052112000, y: 5.1}, {x: 1500052118000, y: 15.1}, {x: 1500052118000, y: 15.2}]
}],
xAxis: {
min: 1500052109000,
max: 1500052119000,
type: "datetime"
},
plotOptions: {
series: {
point: {
events: {
click: (event) => {
alert('clicked ' + event.point.y);
}
}
}
}
}
});
The default behavior of the x-axis title alignment is within the bounds of the x-axis. However, the legend alignment is within the bounds of the entire chart. Thus, if you align both center, they have a slight offset. How can I get the legend to base its position off of the x-axis bounds instead? My graph options are dynamic, so I would need to do it dynamically.
Sample JS Fiddle
$('#container').highcharts({
legend: { margin:5, padding:0 },
xAxis:{
title:{
text:'THIS IS MY X-AXIS TITLE',
align:'middle',
},
categories:["A","B","C","D","E","F"]
}
});
Thanks in advance!
Example for you: http://jsfiddle.net/xqag5e72/2/
In short, you can change translation for legend to be similar to xAxis' title:
function moveLegend(e) {
var legend = this.legend,
x = this.plotLeft + (this.xAxis[0].width / 2) - legend.group.getBBox().width / 2,
y = legend.group.translateY;
legend.group.attr({
transform: 'translate(' + x + ',' + y +')'
});
}
Note: I'm using load and redraw events, to translate legend after first initialization and later to make this legend responsive.
Is it possible to have a diagonal plotline in highcharts?
I have a line chart which tracks weightloss (y axis = weight, x axis = time), and I need a plotline which starts at the initial weight, and plots diagonally to the time when the user should have lost the weight by.
I can plot a simply flat plotline like this:
plotLines: [{
value: 0.696,
width: 3,
color: 'red',
dashStyle: 'dash',
label: {
text: 'Latest value',
align: 'right',
y: 5,
x: 0
}
}]
but, that's just a simple flat line.
Any ideas?
Easiest way is to simply use a separate line series.
Plot just your first and last point. You can disable markers, turn off mousetracking, and hide from the legend if you want it to behave just like a plotLine.
http://api.highcharts.com/highcharts#plotOptions.series.enableMouseTracking
http://api.highcharts.com/highcharts#plotOptions.series.marker.enabled
http://api.highcharts.com/highcharts#plotOptions.series.showInLegend
Plotlines can be horizontal or vertical, but you can use renderer to add custom line (like diagonal) in the chart: http://api.highcharts.com/highcharts#Renderer.path()
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