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
Related
I am trying to create a chart somehow similar to expertoptions' by using Highcharts, however I can't find solution to adding a custom marker to the line, I have tried doing something like:
var myCircle = myChart.renderer.circle(x,y,20).attr({
fill: '#d3d7de'
}).add(circlePointGroup);
var circlePointGroup = myChart.xAxis[0].renderer.g().attr({
translateX: 2000,
translateY: 2000
}).add();
but ended up being a floating static shape, I have here the fiddle, Any help would be appreciated. I have hard time reading their documentation :/
I think that a better approach might be adding this point as a scatter series - that keeps the point in the move while adding new points to the main series. Using renderer.circle renders circle in a static position.
Demo: https://jsfiddle.net/BlackLabel/Lpfj4stx/
var betWindowInterval = setInterval(function() {
myChart.xAxis[0].removePlotLine('markerLineX');
myChart.yAxis[0].removePlotLine('markerLineY');
myChart.series.forEach(s => {
if (s.options.id === 'customPoint') {
s.remove();
}
})
clearInterval(betWindowInterval)
}, 2000);
myChart.addSeries({
type: 'scatter',
data: [{x: lastPointY.x, y: lastPointY.y}],
id: 'customPoint',
marker: {
fillColor: 'red',
radius: 5,
symbol: 'circle'
}
})
API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
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
I know how to show marker at last point like this.
When the data is dynamic, don't know how to mark the last point.
plotOptions: {
column: {
stacking: 'normal'
},
spline: {
marker: {
enabled: true
}
}
}
When you are adding new points dynamically you can simultaneously remove the marker from the current last point (Point.update), while adding a new point with marker enabled (Series.addPoint).
For example (JSFiddle):
// get the series
series = $('#container').highcharts().series[0]
// remove marker from last point
series.points[series.points.length-1].update({
marker: {
enabled:false
}
}, false);
// add new point with marker
series.addPoint({
y: Math.random()*100,
marker: {
enabled: true
}
});
The false parameter for the Point.update is to prevent redrawing, as you are going to redraw after the Series.addPoint anyway, which should save some processing.
I'm trying to add SMA (Simple moving average) into my highstock with dataGrouping.
dataGrouping works fine without SMA. But when I add SMA it only group data on daily basis. Has anyone got the same problem?
I've checked the chart element and I can see the series & SMA object they all got the dataGrouping attribute but still not display properly in the chart.
I tried to add dataGrouping in both plotOptions.series & plotOptions.sma or add it in series respectively but none of them work.
let dataGrouping = {
forced: true,
units: [
['week', [1]],
]
};
const options = {
//...
plotOptions: {
candlestick: {
color: 'green',
upColor: '#e00000',
},
series: {
marker: {
enabled: false,
},
states: {
hover: {
enabled: true,
lineWidth: 1.5,
}
},
dataGrouping,
},
sma: {
dataGrouping,
}
},
}
My highcharts verion is 6.0.7
I also tried to add dataGrouping on an official example and here's the link: http://jsfiddle.net/tuuz4yho/8/
and here's another example with a simple line chart
https://jsfiddle.net/Lyf6vzev/19/
But dataGrouping still not work on SMA lines.
Anyone know how to group SMA weekly or monthly?
Really need your help!
Thanks! :)
Turns out it's a known bug:
https://github.com/highcharts/highcharts/issues/7823
The workaround is setting dataGrouping.approximation and dataGrouping.groupPixelWidth in the indicator config.
How to add a data values inside the slice in pie chart. Can any one help me in this? whether this is possible?
You can use datalalabels - distance parameter : http://api.highcharts.com/highcharts#plotOptions.pie.dataLabels.distance
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/pie-datalabels-distance/
plotOptions: {
pie: {
dataLabels: {
distance: -30,
color: 'white'
}
}
},