osokarp
Posts: 12
Joined: Tue Jan 12, 2021 8:19 am

Point markers getting clipped at the end of axes in boost mode

Hi,

I am currently facing some issues while displaying the chart in boost mode. For this particular chart I need the markers to be displayed. It works fine without boost, but our real dataset is pretty big so boost mode for all our charts is pretty much a must. With boost mode, however, the markers at the edge of the chart gets cut off.

Using the main Highcharts library and the react wrapper:
"highcharts": "^9.1.2",
"highcharts-react-official": "^3.0.0"

Without boost:
markerissue1.PNG
markerissue1.PNG (15.56 KiB) Viewed 692 times
With boost:
markerissue2.PNG
markerissue2.PNG (8.54 KiB) Viewed 692 times
This is the settings I am using for boost mode, for non-boost mode, it's just boostThreshold set to 0:

Code: Select all

{
  "chart": {
    "zoomType": "xy"
  },
  "credits": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "pointPlacement": "on",
      "boostThreshold": 1,
      "turboThreshold": 1
    }
  },
  "title": {
    "text": "Cumulative Default Probability"
  },
  "xAxis": {
    "categories": [
      "1Y",
      "2Y",
      "3Y",
      "4Y",
      "5Y",
      "6Y",
      "7Y",
      "8Y",
      "9Y",
      "10Y"
    ]
  },
  "legend": {
    "layout": "vertical",
    "align": "right",
    "verticalAlign": "middle"
  },
  "colors": [
    "#FF0000",
    "#FF8000",
    "#FFFF00",
    "#80FF80",
    "#00FF00",
    "#00C000",
    "#008000",
    "#0000FF",
    "#C000C0",
    "#800080"
  ],
  "series": [
    {
      "type": "line",
      "name": "test1",
      "data": [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "marker": {
        "symbol": "square"
      }
    },
    {
      "type": "line",
      "name": "test2",
      "data": [
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19
      ],
      "marker": {
        "symbol": "square"
      }
    }
  ]
}
Any suggestions?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Point markers getting clipped at the end of axes in boost mode

Hello osokarp,

Thanks for contacting us with your question.

I have tried to recreate the issue based on your shared config, but everything seems to be working fine, markers aren't clipped. Could you take a look at that demo and try to recreate the problem?
Demo: https://codesandbox.io/s/highcharts-rea ... rked-mzmst

Best regards!
Mateusz Bernacik
Highcharts Developer
osokarp
Posts: 12
Joined: Tue Jan 12, 2021 8:19 am

Re: Point markers getting clipped at the end of axes in boost mode

Hi Mateusz,

Here you go: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx, basically the clipping only appears when boost module is activated and used.
osokarp
Posts: 12
Joined: Tue Jan 12, 2021 8:19 am

Re: Point markers getting clipped at the end of axes in boost mode

Hi,

Any updates to this issue?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Point markers getting clipped at the end of axes in boost mode

Hello osokarp,

Sorry for slightly longer response time.

Your markers getting cut on the edges because of pointPlacement option. Removing that option should resolve the problem.

When it comes to markers clipped by xAxis, the issue is more complicated and it is a bug caused by boost. Here you can find related GH issue:
https://github.com/highcharts/highcharts/issues/9799
Because it is closed feel free to leave your feedback there and reopen it.

Best workaround for this issue I can think of is to add yAxis.min which would be lower than lowest value of your series.
Demo: https://codesandbox.io/s/tender-danny-l ... =/demo.jsx

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”