Change color of marker on hover points - Highcharts

Question

When hovering over the chart, the " marker" is a round gray circle - I want to change that to be a round circle with a green color.

Current chart http://jsfiddle.net/uqjvdtx2/3/

{
"title": {
    "text": "Jun 15, 2021",
    "style": {
        "fontWeight": "bold"
    }
},
"lang": {
    "noData": "Your custom message"
},
"legend": {
    "enabled": false
},
"xAxis": {
    "categories": [],
    "crosshair": {
        "width": 1,
        "zIndex": 2,
        "color": "#ccc"
    },
    "title": {
        "text": "test"
    },
    "visible": true,
    "labels": {
        "enabled": false
    }
},
"chart": {
    "height": 200
},
"yAxis": {
    "title": false,
    "crosshair": false
},
"credits": {
    "enabled": false
},
"tooltip": {
    "enabled": true,
    "backgroundColor": "#fff",
    "borderColor": "#ddd",
    "borderRadius": 0,
    "borderWidth": 0,
    "shadow": false,
    "shared": false,
    "useHTML": true,
    "zIndex": 99999
},
"plotOptions": {
    "area": {
        "marker": {
            "enabled": true,
            "symbol": "circle",
            "fillColor": "green",
            "radius": 2,
            "states": {
                "hover": {
                    "enabled": true,
                    "fillColor": "green"
                }
            }
        }
    }
},
"series": [
    {
        "name": "",
        "data": [
            72.61,
            61.66,
            62.48,
            62.22,
            55.29,
            59.15,
            63.91,
            61.05,
            60.12,
            60.84,
            60.96,
            53.72,
            56.31,
            63.41,
            62.25
        ],
       
        "color": "#ccc",
        "events": {}
    }
]

}enter code here

When hovering over the chart, the " marker" is a round gray circle - I want to change that to be a round circle with a green color.

Answer 1

You defined marker options for area series and you used line series. Correct the options structure and use individual ones per state.

 plotOptions: {
   line: {
     marker: {
       states: {
         hover: {
           fillColor: 'green'
         },
         normal: { ... }
       }
     }
   }
 }

---

Live demo: http://jsfiddle.net/BlackLabel/er7fnkh0/

API Reference: https://api.highcharts.com/highcharts/plotOptions.line.marker.states.hover