[SOLVED] Rendering Issue: Series line/marker getting cut off by yAxis line chart highcharts

Rendering Issue: Series line/marker getting cut off by yAxis line chart highcharts

When the maximum value is 100 the line of the part of the graph is of a smaller thickness. [![Line chart issue][1]][1]

The value cannot be more than 100.

yAxis: {
        title: {
            text: ''
        },
        tickAmount: 5,
        labels: {
            format: '{value}%',
            style: {
                color: 'var(--el-text-color-primary)'
            }
        },
        min: 0,
        max: 100
    }```


  [1]: https://i.sstatic.net/MBfNiRpB.png

Solution

This is because the part of the line is outside the plot area.

As a solution, you can disable clip option for the series:

series: [{
  ...,
  clip: false
}]

Live demo: https://jsfiddle.net/BlackLabel/k3ed86c1/

API Reference: https://api.highcharts.com/highcharts/series.line.clip

Or make some space for the line by increasing y-axis scale:

yAxis: {
  ...,
  tickPositions: [0, 25, 50, 75, 100],
  endOnTick: false,
  min: 0,
  max: 101
}

Live demo: https://jsfiddle.net/BlackLabel/nrjfkdw8/

API Reference: