Highcharts Solid Gauge Legend Symbol - highcharts

Is it possible to style the legend symbol for a solid gauge? I'm need the legend symbols to be colored squares but adding squareSymbol: true isn't working. Here's a fiddle: http://jsfiddle.net/0krjsy5n/
legend: {
squareSymbol: true
},
series: [{
name: 'Speed',
data: [80],
showInLegend: true,
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]


The legend symbol is a representation of the series marker. You can manipulate the legend symbol by editing the series marker. For other charts this will alter the marker shown in the series, but in your case (for gauge) the marker is never shown in the actual graph.
For example, in your case (JSFiddle):
series: [{
marker: {
symbol: 'square', // Make it a square
fillColor: 'red', // With color red
},
lineWidth: 0 // With no line going through it
// ...
}]

Related

remove xAxis label of vertical crosshair in highchart highstock

i have a highstock chart with multiple series, each one has it's own tooltip(shared:false), after hovering mouse, a label appear on xAxis, how to get ride of it?
{
xAxis: {
crosshair: false
},
tooltip: {
useHTML: true,
shadow: false,
borderRadius: 0,
borderColor: "transparent",
backgroundColor: "transparent",
borderWidth: 0,
},
plotOptions: {
series: {
turboThreshold: 0,
},
states: {
hover: {
enabled: false,
},
},
},
series: [ {
type: "line",
name: series[0].name,
data: [...],
color: series[0].color,
tooltip: {
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
},
},
{
type: "line",
data: [...],
name: series[1].name,
color: series[1].color,
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
}],
}
in here i put a sample of what i mean and a picture:
js fiddle

From Highcharts API:
split: boolean Since 5.0.0
Split the tooltip into one label per series, with the header close to
the axis. This is recommended over shared tooltips for charts with
multiple line series, generally making them easier to read. This
option takes precedence over tooltip.shared.
To get rid of the header set headerFormat to an empty string.
tooltip: {
headerFormat: ''
}
Live demo: https://jsfiddle.net/BlackLabel/bc467dmo/
API Reference: https://api.highcharts.com/highstock/tooltip.headerFormat

Highcharts use legend symbol and legend parms, not scatter marker symbols - in scatter plot

I have built multiple bar charts using the same legend setup but it does not seem to transfer to a scatter plot. It instead uses the scatter marker symbols inside the legend.
I need the marker symbols to be circle and the legend symbols to be square but without using a custom legend but can't seem to get there
These are the legend options for bar graphs I am using. It works as intended but when added to the scatter plot, the legend symbol options are not being honored while the itemStyle, cursor, align and verticalAlign are...but the legend symbols are coming from the scatter marker symbols and seem to be linked.
legend: {
enabled: true,
symbolRadius: 0,
symbolHeight: 16,
symbolPadding: 15,
itemMarginBottom: 20,
itemStyle: {
fontFamily: chartFont,
fontWeight: 'normal',
fontSize
},
cursor: 'pointer',
align: 'left',
verticalAlign: 'top'
}
The marker symbol options are defined in the series array as:
marker: {
enabled: true, symbol: 'circle', radius: 15
}

To acheieve the wanted result, you can use the way of drawing legend symbol from column series and set symbolRadius to 0:
Highcharts.seriesTypes.scatter.prototype.drawLegendSymbol =
Highcharts.seriesTypes.column.prototype.drawLegendSymbol;
Highcharts.chart('container', {
series: [{
type: 'scatter',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
legend: {
symbolRadius: 0
}
});
Live demo: http://jsfiddle.net/BlackLabel/4epgLos0/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

highchart line don't show line even when data points exists

I have an issue with highcharts of type 'spline'
I've sent data to the chart and even that the data exist the chart line seems to be cut at random parts
more ever between null points on the graph a line is drawn(the drop on the 12/06/16 in the black series) so it isn't a null issue. and I've got no errors on my console.
this is my graph init:
getChartElement().highcharts({
exporting: {enabled: false},
chart: {
type: 'spline',
zoomType: 'x',
events: {
selection: rangeSelection
}
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br>' +
Highcharts.dateFormat('%e %b %Y %H:%M', this.x) + '<br>' +
Highcharts.numberFormat(this.y, 2);
}
},
series: series,
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
labels: {
format: '{value:%m/%d/%y}'
},
events: {},
plotLines: [{
value: vm.issueDate,
width: 1,
color: 'green',
dashStyle: 'dash',
zIndex: 5,
}]
},
yAxis: {},
plotOptions: {
series: {
turboThreshold: configuration.maxGraphPoints
},
spline: {
marker: {
enabled: vm.isMarkersVisible
}
}
}
});
I can't seem to find a reason for the gaps in the graph. has anyone seen something like this before?
EDIT:
I've changed the image to another more concentrated , and added the data for this graph
screenshot of the issue I should say that in the screen shot there is one point but there are a lot more around it, they should have option for a screenshot gif :)
the data:
"{"tags":["Series1","Series2"],"data":[[1483436500000,34.219906,56.668186000000006],[1483439200000,34.047556,57.155266],[1483441900000,34.068456,57.649016],[1483444600000,34.050936,58.448235999999994],[1483447300000,34.316396,58.039416],[1483450000000,34.546116,58.428616000000005],[1483452700000,34.743466,58.722346],[1483455400000,34.850176,58.737145999999996],[1483458100000,35.050486,58.115166],[1483460800000,35.002866,57.522126],[1483463500000,34.855796,55.661925999999994],[1483466200000,34.796566,55.579976],[1483468900000,34.914366,55.925126000000006],[1483471600000,35.037526,56.223866],[1483474300000,35.008276,55.952646],[1483477000000,34.938055999999996,55.601265999999995],[1483479700000,34.946396,57.74743599999999],[1483482400000,34.860726,56.422796000000005],[1483485100000,34.749856,56.456556000000006],[1483487800000,34.734536,56.02268599999999],[1483490500000,34.710696,55.649186],[1483493200000,34.755316,55.868066],[1483495900000,34.801966,56.07148599999999],[1483498600000,35.175086,55.311626000000004],[1483501300000,34.868296,55.749516],[1483504000000,34.498436,56.425416],[1483506700000,34.526066,56.405936],[1483509400000,34.495226,56.905456],[1483512100000,34.736996,57.665266],[1483514800000,34.403805999999996,56.243786],[1483517500000,34.445266,57.025186000000005],[1483520200000,34.474966,58.428715999999994],[1483522900000,34.225066,59.531206],[1483525600000,33.961646,60.677266],[1483528300000,33.786636,61.355536],[1483531000000,33.875166,60.646305999999996],[1483533700000,33.905626,62.193096],[1483536400000,33.937476,61.098146],[1483539100000,34.293316,59.28490599999999],[1483541800000,34.530886,59.912486],[1483544500000,34.782956,59.955256000000006],[1483547200000,35.121126,61.357696000000004],[1483549900000,34.718436,61.931906],[1483552600000,35.711916,57.322496],[1483555300000,35.475236,57.541686],[1483558000000,35.481466,56.810136],[1483560700000,35.040016,56.614756],[1483563400000,35.030556,59.863856],[1483566100000,34.920466,56.529756000000006],[1483568800000,35.050486,58.436576],[1483571500000,35.050486,57.734145999999996],[1483574200000,35.156616,57.434805999999995],[1483576900000,35.154466,57.73637599999999],[1483579600000,35.101836,58.059096],[1483582300000,35.051496,57.998926],[1483585000000,34.998855999999996,58.298096],[1483587700000,34.911516,58.426916000000006],[1483590400000,35.028296,58.00146599999999],[1483593100000,34.748786,58.137996],[1483595800000,34.739406,57.887506],[1483598500000,34.808656,58.491716],[1483601200000,34.785016,57.416966],[1483603900000,34.971316,57.39732599999999],[1483608700000,null,64.130136],[1483609300000,34.633606,null],[1483611400000,null,53.998146000000006],[1483612000000,35.536296,null],[1483614100000,null,56.150756],[1483614700000,35.490406,null],[1483616800000,null,56.581025999999994],[1483617400000,35.243436,null],[1483619500000,null,57.063676],[1483620100000,35.638996,null],[1483622200000,null,57.347356000000005],[1483622800000,35.638996,null],[1483624900000,null,58.504306],[1483625500000,35.940726,null],[1483627600000,null,58.529796000000005],[1483628200000,36.022656,null],[1483630300000,null,56.503736],[1483630900000,36.081686,null],[1483633000000,null,55.968286000000006],[1483633600000,36.372056,null],[1483635700000,null,56.637946],[1483636300000,36.719646,null],[1483638400000,null,55.93278599999999],[1483639000000,36.721016,null],[1483641100000,null,54.665316000000004],[1483641700000,36.902646,null],[1483643800000,null,54.823786],[1483644400000,37.109685999999996,null],[1483646500000,null,54.314856000000006],[1483647100000,37.317226,null],[1483649200000,null,54.75750600000001],[1483649800000,37.364876,null],[1483651900000,null,54.618516],[1483652500000,36.959966,null],[1483654600000,null,54.384485999999995],[1483655200000,37.191016,null],[1483657300000,null,53.986126],[1483657900000,37.354926,null],[1483660000000,null,53.833296000000004],[1483660600000,37.128735999999996,null],[1483662700000,null,53.708625999999995],[1483663300000,37.340576,null],[1483665400000,null,53.942555999999996],[1483666000000,37.298246,null],[1483668100000,null,54.327676],[1483668700000,37.344015999999996,null],[1483670800000,null,52.919466],[1483671400000,37.384856,null],[1483673500000,null,52.566205999999994],[1483674100000,36.876546,null],[1483676200000,null,51.773675999999995],[1483676800000,36.821936,null],[1483678900000,null,51.389706000000004],[1483679500000,36.769695999999996,null],[1483681600000,null,53.077135999999996],[1483682200000,36.648186,null],[1483684300000,null,52.533496],[1483684900000,36.490846,null],[1483687000000,null,51.950295999999994],[1483687600000,36.326346,null],[1483689700000,null,53.609016],[1483690300000,36.595346,null],[1483692400000,null,52.940315999999996],[1483693000000,36.005396,null],[1483695100000,null,52.44433599999999],[1483695700000,36.063386,null],[1483697800000,null,51.514185999999995],[1483698400000,35.950686,null],[1483700500000,null,53.019206],[1483701100000,35.888916,null],[1483703200000,null,52.924876],[1483703800000,35.708086,null],[1483705900000,null,53.430285999999995],[1483706500000,35.610226,null],[1483708600000,null,54.919156],[1483709200000,35.826046,null],[1483711300000,null,56.011066],[1483711900000,35.954396,null],[1483714000000,null,60.86370599999999],[1483714600000,36.206146,null],[1483716700000,null,63.932226],[1483717300000,36.553256,null],[1483719400000,null,65.751636],[1483720000000,36.376646,null],[1483722100000,null,66.588736],[1483722700000,36.469485999999996,null],[1483724800000,null,65.012736],[1483725400000,36.719015999999996,null],[1483727500000,null,64.805766],[1483728100000,36.722796,null],[1483730200000,null,65.033006],[1483730800000,36.890826,null],[1483732900000,null,65.026316],[1483733500000,36.523786,null],[1483735600000,null,62.355006],[1483736200000,35.250296,null],[1483738300000,null,61.885886],[1483738900000,35.068205999999996,null],[1483741000000,null,62.914156000000006],[1483741600000,35.159856,null],[1483743700000,null,61.454406000000006],[1483744300000,35.295906,null],[1483746400000,null,60.997966000000005],[1483747000000,35.431956,null],[1483749100000,null,60.864366000000004],[1483749700000,35.568706,null],[1483751800000,null,60.33397599999999],[1483752400000,35.612716,null],[1483754500000,null,60.226226],[1483755100000,35.638996,null],[1483757200000,null,60.695226000000005],[1483757800000,35.638996,null],[1483759900000,null,60.044976000000005],[1483760500000,35.747096,null],[1483762600000,null,59.267495999999994],[1483763200000,35.906606,null],[1483765300000,null,60.225086000000005],[1483765900000,35.473906,null],[1483768000000,null,60.19800599999999],[1483768600000,35.141326,null],[1483770700000,null,60.319676],[1483771300000,34.927346,null],[1483773400000,null,60.239565999999996],[1483774000000,34.828386,null],[1483776100000,null,60.844066],[1483776700000,34.708716,null],[1483778800000,null,60.570926],[1483779400000,34.583616,null],[1483781500000,null,60.19209599999999],[1483782100000,34.463946,null],[1483784200000,null,61.080535999999995],[1483784800000,34.531076,null],[1483786900000,null,62.448046000000005],[1483787500000,34.557726,null],[1483789600000,null,62.603616],[1483790200000,34.583225999999996,null],[1483792300000,null,63.707105999999996],[1483792900000,34.602586,null],[1483795000000,null,63.756426000000005],[1483795600000,34.631766,null],[1483797700000,null,64.362686],[1483798300000,34.585755999999996,null],[1483800400000,null,63.391046],[1483801000000,34.893546,null],[1483803100000,null,63.281465999999995],[1483803700000,34.780836,null],[1483805800000,null,62.069226],[1483806400000,34.830476,null],[1483808500000,null,61.197186],[1483809100000,35.012096,null],[1483811200000,null,61.948235999999994],[1483811800000,35.077906,null],[1483813900000,null,62.346136],[1483814500000,35.009746,null],[1483816600000,null,60.837086],[1483817200000,35.134366,null],[1483819300000,null,62.107156],[1483819900000,35.204375999999996,null],[1483822000000,null,62.358816000000004],[1483822600000,35.244596,null],[1483824100000,35.265586,61.764275999999995]]}"

Since a lot of your values are null these will create gaps in your series. To avoid this, set connectNulls to true in your plotOptions, which will tell highchart to graph even when there is a null.
API ref on spline.connectNulls: https://api.highcharts.com/highcharts/plotOptions.spline.connectNulls
Edit:
Working example: https://jsfiddle.net/y5ygdx2a/2/

Horizontal crosshairs for multiple series

It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)

You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/

Highcharts - Color coded legend for solid gauge

I am trying to use the highcharts solid gauge, and I would like to have a legend, however Highcharts developers seem to have removed the color option from solid gauge series, which I believe is what the legend pulls it's color from.
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
color: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}],
showInLegend:true
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}],
showInLegend:true
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}],
showInLegend:true
}]
Jsfiddle
Is there any way to get my legend to match the series colors?

I haven't been able to figure out how to color the marker in the legend, but to me the markers don't make sense in this case anyhow. So, I've turned them off in my fiddle.
To color the text, you can use the legend labelFormatter function.
legend: {
labelFormatter: function() {
return '<span style="text-weight:bold;color:' + this.userOptions.color + '">' + this.name + '</span>';
},
symbolWidth: 0
},
http://jsfiddle.net/9dq2p7dw/21/

Just to add, Barbara's answer is still valid in 2019.
However, to remove the marker, you'll have to add
squareSymbol: false
I would have added this as a comment in her answer but I do not have enough reputation points.

Resources