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
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 change the color and radius of my spline's marker as soon as it crosses a certain value by using point.update however now I am aggregating the data using dataGrouping and I have lost that ability. How can I color the aggregated data point?
Currently it is not possible to update grouped points. Please check a thread in this github isssue: https://github.com/highcharts/highcharts/issues/5147
However, you can use attr method directly on SVG point elements:
chart: {
events: {
load: function() {
var points = this.series[0].groupedData;
points.forEach(function(point) {
if (point.y > 30) {
point.graphic.attr({
width: 8,
height: 8,
fill: 'red',
translateX: -2
});
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/58afeL47/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
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
Is there a way to show plotlines even when the associated axis has visible: false? Is seems that hiding the axis also hides the plotlines.
More details...
I'm drawing a diagram of a day, like this:
I simply want to add a vertical line at certain times, line the "Now" time, etc.
If I do that using a plot line, then the axis shows up too:
I definitely do not want the axis to show.
My plan now is to draw my own line on the chart using render.rect or render.path. Is there another option?
I found a relatively trivial solution... just hide it with css:
.highcharts-xaxis {
display: none;
}
and in js:
xAxis: {
type: 'datetime',
labels:{
enabled: false
}
}
You can extend Highcharts by wrapping the method responsible for redrawing an axis.
Highcharts.wrap(Highcharts.Axis.prototype, 'redraw', function(p) {
p.call(this);
console.log(this);
var axis = this,
each = Highcharts.each,
options = this.options;
// move plot lines and bands
if (!axis._addedPlotLB) { // only first time
each((options.plotLines || []), function(plotLineOptions) {
axis.addPlotBandOrLine(plotLineOptions);
});
axis._addedPlotLB = true;
}
each(this.plotLinesAndBands, function(plotLine) {
plotLine.render();
});
});
example: http://jsfiddle.net/ncs81btt/
The solution above is not very elegant, though. Much better ways to do it is using Renderer or hide particular axis elements (labels, ticks, etc.).
Depending on what you need from plot lines functionality, using renderer requires to do some calculations.
var customPlotLines = [{
value: 5,
color: 'red',
width: 3
}, {
value: 10,
color: 'yellow',
width: 3
}]
function renderPlotLines() {
var axis = this.xAxis[0],
top = axis.chart.plotTop,
bottom = top + axis.chart.plotHeight,
path = [
'M', null, top,
'L', null, bottom
];
if (!this.customPlotLines) {
this.customPlotLines = customPlotLines.map(plotLine => {
return this.renderer.path([]).add();
});
}
this.customPlotLines.forEach((plotLine, i) => {
var opt = customPlotLines[i];
path[4] = path[1] = axis.toPixels(opt.value);
plotLine.attr({
d: path.join(' '),
'stroke-width': opt.width,
stroke: opt.color
});
});
}
Hook into load/redraw event, so the elements will resize.
chart: {
zoomType: 'xy',
events: {
load: renderPlotLines,
redraw: renderPlotLines
}
},
example: http://jsfiddle.net/ncs81btt/1/
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