How to add markers to any point in a polar chart in Anycharts

138 Views Asked by At

I am trying to add marker points to a polar chart in Anycharts.

Here is what I tried:

anychart.onDocumentLoad(function () {
  var data_polar= [],
        polar_bg_colors = [];
      data_polar.push({x: "Sales", value: "75.0", fill: "#f16954", stroke: "#f16954"});
      polar_bg_colors.push("#f16954 0.3");
      data_polar.push({x: "CS", value: "83.22", fill: "#f0d55e", stroke: "#f0d55e"});
      polar_bg_colors.push("#f0d55e 0.3");
      data_polar.push({x: "Dev", value: "67.67", fill: "#84d1f4", stroke: "#84d1f4"});
      polar_bg_colors.push("#84d1f4 0.3");
      data_polar.push({x: "Admin", value: "72.78", fill: "#89b698", stroke: "#89b698"});
      polar_bg_colors.push("#89b698 0.3");
   
      var chart_3 = anychart.polar();
      chart_3.column(data_polar);
      chart_3.sortPointsByX(true);
      chart_3.xGrid().palette(polar_bg_colors);
      chart_3.xScale('ordinal');
      chart_3.yScale().minimum(0);

      var data = [
        {x: 'Sales', value: 40}
      ];

      var series1 = chart_3.line(data);
      series1.closed(false).markers(true);

      chart_3.container("container");
      chart_3.draw();

});
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
<link href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css" rel="stylesheet"/>

<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-polar.min.js"></script>
<div id="container"></div>

I would like to add a marker to the position shown in the image below. You can see a red marking in the image. Is it possible to do that?

https://playground.anychart.com/5TSbbC3h/1

enter image description here

0

There are 0 best solutions below