Search code examples
angularhighchartspolar-chart

How to remove inside line of y-axis and o to 100 labels from the Polar triangle Polygon chart

We are trying a Polar type triangle polygon chart and where we want to remove the inside y-axis lines and along with 0 to 100 labels from the chart.

Highcharts.chart('container', {
  "credits": {
    "enabled": false
  },
  "chart": {
    "polar": true,
    "marginBottom": -25,
     "type": 'area',
     "plotBackgroundColor": null,
     
    "plotBorderWidth": null,
    "plotShadow": false,
    "style": {
      "fontWeight": 400,
      "fontSize": 11,
      "letterSpacing": "-0.06px",
      "lineHeight": "16px"
    }
  },
  
  "tooltip": {
    "enabled": false
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "min": 0,
    "categories": [
      "Category1",
      "Category2",
      "Category3"
    ],
    "tickmarkPlacement": "on",
    "lineWidth": 0,
    "gridLineWidth": 3,
    "labels": {
      "useHTML": true,
      "align": "center",
      "style": {
        "whiteSpace": "nowrap",
        "color": "#26415e",
        "fontSize": "12px"
       
      }
    }
  },
  "yAxis": {
    "gridLineInterpolation": "polygon",
    "min": 0,
    "max": 100,
    
    "gridLineWidth": 3,
    "labels": {
      "align": "center",
      "y": 5,
      "x": 0,
      "style": {
        "color": "#333333",
        "fontSize": "10px"
      }
    }
  },
  "plotOptions": {
    "series": {
      "marker": {
        "radius": 2.5
      },
      "states": {
        "hover": {
          "enabled": false
        },
        "inactive": {
          "opacity": 1
        }
      }
    },
    "areaspline": {
      "dataLabels": {
        "enabled": false
      },
    }
  },
  "series": [{
      "showInLegend": false,
      "data": [{
          "y": 100,
          "color": "#dce1e6"
        },
        {
          "y": 100,
          "color": "#dce1e6"
        },
        {
          "y": 100,
          "color": "#dce1e6"
        }
      ],
      "color": "transparent",
      "pointPlacement": "on",
      "marker": {
        "symbol": "circle"
      },
      
    },
    {
      "showInLegend": false,
      "data": [{
          "y": 36
        },
        {
          "y": 64         
        },
        {
          "y": 33      
        }
      ],
      "pointPlacement": "on",
      "type": "area",
      "color": "rgba(80,227,181,0.5)"
    }
  ]
});

And this is looking like this enter image description here

But we want the chart to come like this enter image description here So to achieve this want are the exact properties we have to remove are add. Please us here.

Solution

  • To hide the lines, just set xAxis.gridLineWidth: 0; and to disable the label use the xAxis.labels.enabled: false; property.

    Demo: https://jsfiddle.net/BlackLabel/me0p4L9b/
    API: https://api.highcharts.com/highcharts/yAxis.gridLineWidth
    https://api.highcharts.com/highcharts/xAxis.labels.enabled