How do I change the line width of the area polygon in highchart?

Question

I would like to make changes (color, width) to this:

Highcharts.chart('container', {
    title: {
      text: null
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '{point.y}'
    },
    pane: {
      size: '95%'
    },
    chart: {
      type: 'area',
      polar: true,
      spacingTop: 0
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ["John","Weta","Marry"],
      tickmarkPlacement: 'on',
      lineWidth: 2,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 2,
      min: 0,
      max: 100,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    plotOptions: {
      series: {
        borderWidth: 4,
        borderColor: '#a00'
      }
    },
    series: [{
      data: [68,97,964]
    }]
  })

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 400px"></div>

Answer 1

Use lineWidth instead of borderWidth property:

plotOptions: {
    series: {
        lineWidth: 4,
        ...
    }
}

---

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

API Reference: https://api.highcharts.com/highcharts/series.polygon.lineWidth

Answer 2

You can use

plotOptions: {
        series: {
            lineWidth: 5,
            lineColor: '#a00'
        }
    }

Highcharts.chart('container', {
    title: {
      text: null
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '{point.y}'
    },
    pane: {
      size: '95%'
    },
    chart: {
      type: 'area',
      polar: true,
      spacingTop: 0
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ["John","Weta","Marry"],
      tickmarkPlacement: 'on',
      lineWidth: 2,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 2,
      min: 0,
      max: 100,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    plotOptions: {
      series: {
        borderWidth: 4,
        lineWidth: 10,
        lineColor: '#a00',
        borderColor: '#a00'
      }
    },
    series: [{
      data: [68,97,964]
    }]
  })

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 400px"></div>

API References: https://api.highcharts.com/highcharts/plotOptions.series.lineWidth