I am using scatter plot highcharts where i have dropdown (option1, option2, option3) and when i try to filter through option3 the marker.symbol is mixing with other symbols. Assume for option1(symbol:square), option2(symbol:circle),option3(symbol:diamond) and attached the screenshots below
marker: {
enabled:true,
symbol: "square",
lineWidth: 0
}
marker: {
enabled:true,
symbol: "circle",
lineWidth: 0
},
marker: {
enabled:true,
symbol: "diamond",
lineWidth: 0
},
The problem I am facing is, when i try to filter for option3 in the dropdown, chart is loading with diamond and square .
1) When select all the options in the dropdown, the chart looks like this
enter image description here
2) When I select only option3(chat) the chart look like this , below we can see instead of diamond , i am getting square. Please help me on this
enter image description here
Related
I currently was looking at How do I put Icons in the y Axis for a Dynamic Highcharts chart?
My question is similar but here, I want to return a triangle symbol without an image.
I want the axis to have a triangular symbol on a specific point
image of what i am trying to establish
i have a formatter
chartOptions.Xaxis.labels.formatter = function() {
if (<some point>) {
return <triangle symbol>
}
}
You can add a new dummy series to render this point:
{
marker: {
symbol: 'triangle'
},
enableMouseTracking: false,
color: 'red',
data: [{
x: 3,
y: 0,
}]
}
Demo: https://jsfiddle.net/BlackLabel/rqyujk38/
I have created a graph using highcharts which has 6 series. 3 are column series and 3 are spline series.spline series will collide or go within the column chart so having a requirement to add outline to spline series to have better viewing. Trying to add a border color for the spline series but unable to do. But the same is possible in column chart.If anyone have tried this before for spline series kindly help.
plotOptions: {
series: {
borderColor: '#303030'
}
},
this bordercolor is working for column but not in spline series
column chart
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-bordercolor/
would like to have border for the below series
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-box/
There is no such feature in Highcharts to set line border, but all is not lost.
You can achieve the effect you want, by adding new "fake" series basing on every line series, and set a couple of parameters.
Best place (in code) to do that would be the chart.events.load function, so there just find all series with line type:
chart: {
events: {
load() {
var series = this.series.filter(elem => elem.type === 'line')
}
}
}
Then, iterate on all the series found, and create new one so that it would have color: [color_you_want], the same data and marker.symbol, increased lineWidth as well as marker.radius, won't be accessible by mouse and not visible in legend, just like below:
chart: {
events: {
load() {
var series = this.series.filter(elem => elem.type === 'line')
series.forEach(series => {
this.addSeries({
data: series.userOptions.data,
showInLegend: false,
color: '#000',
enableMouseTracking: false,
zIndex: -9999,
marker: {
symbol: series.symbol,
radius: series.options.marker.radius + 1
},
lineWidth: series.options.lineWidth + 2
})
})
}
}
}
Hope, it helps you.
Live example: http://jsfiddle.net/yw2tb4nm/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.marker.symbol
https://api.highcharts.com/highcharts/series.line.marker.radius
https://api.highcharts.com/highcharts/series.line.showInLegend
https://api.highcharts.com/highcharts/series.line.enableMouseTracking
Am using high charts, when am calculating the average time and plotting the pin position slightly changed. Here am attaching the screen shot, please have a look on it and help me out from this. Thank you.
Here is my series,
var data = [
{
name: 'No. of potholes',
data: seriesArray,
stack: 'North',
color: 'lightblue'
},
{
type: 'line',
name: 'Average',
data: seriesAvg,
color: 'orange',
marker: {
lineWidth: 2,
lineColor: 'orange',
fillColor: 'white'
}
},
{
name: 'KPI',
color: 'grey'
},
]
The plotting circle position has been changed:
This is caused by the grouping functionality (https://api.highcharts.com/highcharts/series.column.grouping):
When it is enabled each column series has a reserved space in every group. There're two column series in your chart. The second column series occupies half of the space in each group even though it has no data.
Set grouping to false to prevent this unwanted behavior.
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 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