- Chart Gallery
- Custom Drawing
- BySpot Hover Logic
BySpot Hover Logic
{
"chart": {
"zIndex": 0,
"enabled": true,
"type": "polar",
"title": {
"zIndex": 80,
"enabled": false,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Chart Title",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"interactivity": {
"spotRadius": 40,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "by-spot",
"selectionMode": "multi-select"
},
"defaultSeriesType": "marker",
"maxBubbleSize": "20%",
"minBubbleSize": "5%",
"maxPointWidth": "100%",
"minPointLength": 0,
"baseline": 0,
"palette": {
"type": "distinct",
"items": [
"#64b5f6",
"#1976d2",
"#ef6c00",
"#ffd54f",
"#455a64",
"#96a6a6",
"#dd2c00",
"#00838f",
"#00bfa5",
"#ffa000"
]
},
"markerPalette": {
"items": [
"circle",
"diamond",
"square",
"triangle-down",
"triangle-up",
"diagonal-cross",
"pentagon",
"cross",
"v-line",
"star5",
"star4",
"trapezium",
"star7",
"star6",
"star10"
]
},
"hatchFillPalette": {
"items": [
{
"type": "backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "grid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-cross",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "divot",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "checker-board",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "confetti",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "plaid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "solid-diamond",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "zig-zag",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "weave",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-05",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-10",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-20",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-25",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-30",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-40",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-50",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-60",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-70",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-75",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-80",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-90",
"color": "black 0.5",
"thickness": 1,
"size": 10
}
]
},
"normal": {
"labels": {
"enabled": false
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"hovered": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"selected": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"barGroupsPadding": 0,
"barsPadding": 0,
"xScale": 0,
"yScale": 1,
"series": [
{
"enabled": true,
"seriesType": "line",
"clip": false,
"legendItem": {
"enabled": true,
"iconType": "square"
},
"color": null,
"connectMissingPoints": false,
"isVertical": null,
"normal": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": true
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": true,
"disablePointerEvents": false,
"position": "value",
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"hovered": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": true,
"type": "star10",
"size": 8,
"fill": "yellow"
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"selected": {
"fill": {
"color": "#333",
"opacity": 0.85
},
"negativeFill": {
"color": "#333",
"opacity": 0.85
},
"risingFill": {
"color": "#333",
"opacity": 0.85
},
"fallingFill": {
"color": "#333",
"opacity": 0.85
},
"stroke": {
"color": "#333",
"opacity": 0.85
},
"lowStroke": {
"color": "#333",
"opacity": 0.85
},
"highStroke": {
"color": "#333",
"opacity": 0.85
},
"lowFill": {
"color": "#333",
"opacity": 0.85
},
"highFill": {
"color": "#333",
"opacity": 0.85
},
"negativeStroke": {
"color": "#333",
"opacity": 0.85
},
"risingStroke": {
"color": "#333",
"opacity": 0.85
},
"fallingStroke": {
"color": "#333",
"opacity": 0.85
},
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": true,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"a11y": {
"enabled": false,
"titleFormat": "Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"
},
"data": [
[
0,
1
],
[
1,
2
],
[
2,
3
],
[
3,
4
],
[
4,
null
],
[
0,
6
],
[
1,
7
],
[
2,
8
],
[
3,
null
],
[
4,
10
],
[
0,
11
],
[
1,
12
],
[
2,
null
],
[
3,
14
],
{
"x": 4,
"value": 15,
"state": "selected"
},
[
0,
16
],
[
1,
null
],
[
2,
18
],
[
3,
19
],
[
4,
20
]
],
"closed": true,
"xScale": 0,
"yScale": 1
},
{
"enabled": true,
"seriesType": "marker",
"clip": false,
"legendItem": {
"enabled": true,
"iconStroke": "none"
},
"color": null,
"isVertical": null,
"normal": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"size": 4,
"labels": {
"enabled": true
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": false,
"disablePointerEvents": false,
"position": "value",
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"hovered": {
"fill": "yellow",
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"size": 6,
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": null,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"selected": {
"fill": {
"color": "#333",
"opacity": 0.85
},
"negativeFill": {
"color": "#333",
"opacity": 0.85
},
"risingFill": {
"color": "#333",
"opacity": 0.85
},
"fallingFill": {
"color": "#333",
"opacity": 0.85
},
"stroke": {
"color": "#212121",
"thickness": 1.5
},
"lowStroke": {
"color": "#333",
"opacity": 0.85
},
"highStroke": {
"color": "#333",
"opacity": 0.85
},
"lowFill": {
"color": "#333",
"opacity": 0.85
},
"highFill": {
"color": "#333",
"opacity": 0.85
},
"negativeStroke": {
"color": "#333",
"opacity": 0.85
},
"risingStroke": {
"color": "#333",
"opacity": 0.85
},
"fallingStroke": {
"color": "#333",
"opacity": 0.85
},
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"type": "star10",
"size": 8,
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": null,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"a11y": {
"enabled": false,
"titleFormat": "Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"
},
"data": [
[
0.5,
1
],
[
1.5,
2
],
[
2.5,
3
],
[
3.5,
4
],
[
4.5,
null
],
[
0.5,
6
],
{
"x": 1.5,
"value": 7,
"state": "selected"
},
[
2.5,
8
],
[
3.5,
null
],
[
4.5,
10
],
[
0.5,
11
],
[
1.5,
12
],
[
2.5,
null
],
[
3.5,
14
],
[
4.5,
15
],
[
0.5,
16
],
[
1.5,
null
],
[
2.5,
18
],
[
3.5,
19
],
[
4.5,
20
]
],
"closed": true,
"xScale": 0,
"yScale": 1
}
],
"startAngle": 0,
"innerRadius": 0,
"xAxis": {
"zIndex": 25,
"enabled": true,
"overlapMode": "no-overlap",
"fill": "none",
"stroke": "#CECECE",
"startAngle": 0,
"labels": {
"zIndex": 25,
"enabled": true
},
"minorLabels": {
"zIndex": 25,
"enabled": false
},
"ticks": {
"zIndex": 25,
"enabled": true,
"stroke": "#CECECE",
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 25,
"enabled": false,
"stroke": "#EAEAEA",
"length": 4,
"position": "outside"
},
"scale": 0
},
"yAxis": {
"zIndex": 35,
"enabled": true,
"startAngle": 0,
"overlapMode": "no-overlap",
"stroke": "#CECECE",
"drawFirstLabel": true,
"drawLastLabel": true,
"innerRadius": 0,
"labels": {
"zIndex": 35,
"enabled": true
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": "#CECECE",
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": "#EAEAEA",
"length": 4,
"position": "outside"
},
"scale": 1
},
"xGrids": [
{
"palette": {
"type": "distinct",
"items": [
"none"
]
},
"zIndex": 11,
"enabled": true,
"stroke": "#CECECE",
"drawFirstLine": true,
"drawLastLine": true,
"isMinor": false,
"scale": 1
}
],
"yGrids": [
{
"palette": {
"type": "distinct",
"items": [
"none"
]
},
"zIndex": 11.001,
"enabled": true,
"stroke": "#CECECE",
"drawFirstLine": true,
"drawLastLine": true,
"isMinor": false,
"scale": 1
}
],
"sortPointsByX": false,
"scales": [
{
"type": "linear",
"inverted": false,
"maximum": null,
"minimum": null,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"minCount": 4,
"maxCount": 6
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"count": 5
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
},
{
"type": "linear",
"inverted": false,
"maximum": null,
"minimum": null,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"minCount": 4,
"maxCount": 6
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"count": 5
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
}
]
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-polar.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
var chart = anychart.polar();
chart.padding(0);
// grid settings
chart.yGrid(true).xGrid(true);
chart.xAxis(true);
chart.yAxis(true);
chart.listen('mouseMove', function (event) {
if (event.target.paginator) {
return;
}
var interactivity = this.interactivity();
if (interactivity.hoverMode() !== 'bySpot') {
return;
}
var spotRadius = interactivity.spotRadius();
var clientX = event.clientX;
var clientY = event.clientY;
var container = $(this.container().getStage().container());
var containerOffset = container.offset();
var scrollLeft = $(document).scrollLeft();
var scrollTop = $(document).scrollTop();
var x = clientX - (containerOffset.left - scrollLeft);
var y = clientY - (containerOffset.top - scrollTop);
if (this.getType() === 'polar' || this.getType() === 'radar') {
var dataBounds = this.xAxis().getRemainingBounds();
var radius = Math.min(dataBounds.width, dataBounds.height) / 2;
var cx = Math.round(dataBounds.left + dataBounds.width / 2);
var cy = Math.round(dataBounds.top + dataBounds.height / 2);
var clientRadius = Math.sqrt(
Math.pow(cx - x, 2) + Math.pow(cy - y, 2)
);
if (clientRadius > radius) {
if (this.spotCircle) this.spotCircle.parent(null);
if (this.centerLine) this.centerLine.clear();
if (this.leftLine) this.leftLine.clear();
if (this.rightLine) this.rightLine.clear();
return null;
}
if (!this.spotCircle) {
this.spotCircle = anychart.graphics
.circle()
.radius(spotRadius)
.zIndex(1000)
.stroke('black .5');
}
if (!this.spotCircle.hasParent()) {
this.spotCircle.parent(this.container());
}
this.spotCircle.centerX(x).centerY(y);
if (!this.centerLine) {
this.centerLine = this.container()
.path()
.zIndex(1000)
.stroke('black .2')
.disablePointerEvents(true);
}
this.centerLine.clear().moveTo(cx, cy).lineTo(x, y);
var dx;
var dy;
var angle;
var leftSideRatio;
var rightSideRatio;
if (clientRadius - spotRadius >= 0) {
dx = cx - x;
dy = cy - y;
angle = Math.atan(dx / dy);
if (angle <= 0) angle += Math.PI;
if (dx < 0 || (angle === Math.PI && dy > 0)) angle += Math.PI;
angle += this.startAngle();
var dAngle = Math.asin(spotRadius / clientRadius);
var leftSideAngle = angle + dAngle;
var rightSideAngle = angle - dAngle;
leftSideRatio = 1 - leftSideAngle / (Math.PI * 2);
rightSideRatio = 1 - rightSideAngle / (Math.PI * 2);
var leftA =
((this.startAngle() - 90 + 360 * leftSideRatio) * Math.PI) /
180;
var rightA =
((this.startAngle() - 90 + 360 * rightSideRatio) * Math.PI) /
180;
if (!this.leftLine) {
this.leftLine = this.container()
.path()
.zIndex(1000)
.stroke('black .2');
}
this.leftLine
.clear()
.moveTo(cx, cy)
.lineTo(
cx + radius * Math.cos(leftA),
cy + radius * Math.sin(leftA)
);
if (!this.rightLine) {
this.rightLine = this.container()
.path()
.zIndex(1000)
.stroke('black .2');
}
this.rightLine
.clear()
.moveTo(cx, cy)
.lineTo(
cx + radius * Math.cos(rightA),
cy + radius * Math.sin(rightA)
);
} else {
if (this.leftLine) this.leftLine.clear();
if (this.rightLine) this.rightLine.clear();
}
} else {
var bounds = this.getPixelBounds();
if (!bounds.contains({ x: x, y: y })) {
if (this.spotCircle) this.spotCircle.parent(null);
return null;
}
if (!this.spotCircle) {
this.spotCircle = anychart.graphics
.circle()
.radius(spotRadius)
.zIndex(1000)
.stroke('black .5');
}
if (!this.spotCircle.parent()) {
this.spotCircle.parent(this.container());
}
this.spotCircle.centerX(x).centerY(y);
}
});
chart.listen('mouseOut', function () {
if (!(this.getType() === 'polar' || this.getType() === 'radar')) {
if (this.spotCircle) this.spotCircle.parent(null);
}
});
chart.interactivity({ hoverMode: 'by-spot', spotRadius: 40 });
var s1 = chart.line([
[0, 1],
[1, 2],
[2, 3],
[3, 4],
[4, NaN],
[0, 6],
[1, 7],
[2, 8],
[3, NaN],
[4, 10],
[0, 11],
[1, 12],
[2, NaN],
[3, 14],
{ x: 4, value: 15, state: 'selected' },
[0, 16],
[1, NaN],
[2, 18],
[3, 19],
[4, 20]
]);
var s2 = chart.marker([
[0.5, 1],
[1.5, 2],
[2.5, 3],
[3.5, 4],
[4.5, NaN],
[0.5, 6],
{ x: 1.5, value: 7, state: 'selected' },
[2.5, 8],
[3.5, NaN],
[4.5, 10],
[0.5, 11],
[1.5, 12],
[2.5, NaN],
[3.5, 14],
[4.5, 15],
[0.5, 16],
[1.5, NaN],
[2.5, 18],
[3.5, 19],
[4.5, 20]
]);
s1.labels().enabled(true);
s2.labels().enabled(true);
s1.markers(true);
s1.hovered()
.markers()
.fill('yellow')
.size(s1.hovered().markers().size() + 2)
.type('star10');
s2.hovered().fill('yellow');
s2.selected()
.size(s2.hovered().size() + 2)
.type('star10');
chart.container('container').draw();
});
</script>
</body>
</html>
With AnyChart, you are able to create far much more than simple charts. Our component allows drawing anything besides the default elements. You can even create a picture that will have nothing to do with charts; also it’s possible to customize your charts, making them more attractive, informative and unique.
This sample of a Polar Chart demonstrates how to highlight the hovered points and make an accent on the points nearby. There is a polar chart with two series, which points look differently (circles and squares). The points are not only highlighted with bright yellow but also there is a circle (of a some defined radius) drawn around them. The rays bordering the circle put more attention to the hovered point and other that came into the hovering radius. Note that a tooltip shows the information about the first point that got into a hovering circle, if there are plenty of them.