I would like to display spline graph without marker on the line. This is done.
But now, When a point is selected, the marker doesn't appear.
I found a little hack to do what I want. In plotOptions, radius is set to 0.1 to be hidden by the line width.
plotOptions: {
series: {
allowPointSelect: true,
marker: {
radius: 0.1, // hack to show selected point
states: {
hover: {
radius: 5
},
select: {
radius: 5
}
}
}
}
}
}
Complete code is here : http://jsfiddle.net/ManUtopiK/7GXeT/
This is an HighCharts bug or I made a mistake in graph options ?
If you set your marker to have enabled: false you still show the marker point if you hover over the point (when the tooltip popup appers).
See updated fiddle here:
plotOptions: {
series: {
allowPointSelect: true,
marker: {
enabled: false,
//radius: 0.1, // hack to show selected point
states: {
hover: {
radius: 5
},
select: {
radius: 5
}
}
}
}
}
Related
How do I to enable the markers only for those series which has only a single data point.
Here I have disabled it for the whole chart. So then the 3rd series doesn't shows up until mouse over.
plotOptions: {
series: {
marker: {
enabled: false
}
}
}
https://jsfiddle.net/Mithun146/ef6dtjon/2/
You just need to enable the marker for that specific series, like this:
series: [
...,
{
marker: {
enabled: true
},
data: [10]
}
]
Working JSFiddle example: https://jsfiddle.net/ewolden/ak0m8r75/
I've set markers in HighCharts to false for line charts, but I would this means that if the series a single point or if there is a discontinuous series like: [2.45, 7.89, null, 3.45] the 3.45 point would not show up at all on the chart. Is there a way to fix this?
line: {
marker: {
enabled: false
}
}
The 3.45 point does appear on the chart - if you hover over where it supposed to be you can see it highlighted. Issue is there is no line connecting to it from your 7.89 because connectNulls is false by default. To see the points connected turn this to true. You can also enable a marker per point not just per series:
series: [{
data: [{
y: 2.45
}, {
y: 7.89
}, {
y: null
}, {
y: 3.45,
marker: {
enabled: true
}
}]
Sample fiddle.
I am using the latest version of HighCharts to build a chart with multiple trends. By default HighCharts increases the thickness / lineWidth of a line when the user's mouse hovers over it. Because I could have ~10 trends on the chart I would like to remove this feature, meaning that the thickness of the line does not change on hover.
jsFiddle of code so far
I believe I need to set this in the plotOptions{} section. I have tried adding the following without success:
plotOptions: {
series: {
mouseOver: {
lineWidth: 2
}
},
marker: {
enabled: false,
states: {
hover: {
lineWidth: 2
}
}
}
},
I would, however, like to retain the marker that denotes where the mouse of positioned:
Make this below change (Set the states mouseover to disabled state)
plotOptions: {
series: {
lineWidth: 2,
states: {
hover: {
enabled: false
}
}
},
DEMO
In that case make lineWidth: 1 for hover
plotOptions: {
series: {
lineWidth: 2,
states: {
hover: {
lineWidth: 1
}
}
DEMO 2
What you need here is the lineWidthPlus property.
plotOptions: {
series: {
states: {
hover: {
lineWidthPlus: 0
}
}
}
}
This way, no matter what else you change, the chart will not change the lineWidth when hovered.
API Reference:
http://api.highcharts.com/highcharts#plotOptions.series.states.hover.lineWidthPlus
Your fiddle updated:
http://jsfiddle.net/jlbriggs/4oypoeom/8/
I need to underline with different colors data, based on some values. I can change color in detail chart, but I need to change it in master chart too.
Here the JSFiddle http://jsfiddle.net/2msZe/35/
I have printed in console the data, and here there is color set to black.
{y:0.97, color:'black', flag:true}
Any help?
Thanks
You need to disable turbpThreshold, otherwise colors are not used, see: http://jsfiddle.net/2msZe/37/
plotOptions: {
series: {
turboThreshold: 0,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
I have a chart that is a column chart rendered on top of a area chart. Here is an example:
http://jsfiddle.net/78p42/4/
Is there a way to make the outer edge of the area chart to match up with the outer edges of the first and last columns in the column chart? In case you are not sure what I mean, please see this image I created.
I figured there would be a way to do it in the plotOptions for the area charts, but I can't find a way.
plotOptions: {
column: {
borderWidth: 0,
pointPadding: 0.1,
groupPadding: 0,
states: {
hover: {
enabled: false
}
}
},
area: {
lineWidth: 0,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
pointPlacement: 0 // I have noticed that this will shift the whole graph over, but then there is a huge gap on one side of the graph
}
},
Thanks for your time.