# Highcharts in custom JS

**URL:** <https://forums.knack.com/t/highcharts-in-custom-js/20570>\
**Category:** API & Custom Code\
**Created:** [September 18, 2026, 11:36am UTC](https://forums.knack.com/t/highcharts-in-custom-js/20570 "2026-09-18T11:36:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pieter](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Pieter](https://forums.knack.com/u/Pieter)\
**Post date:** [September 18, 2026, 11:36am UTC](https://forums.knack.com/t/highcharts-in-custom-js/20570/1 "2026-09-18T11:36:17Z")

</div>

I use Highcharts in my custom JS on my app. I would like to use a polar type chart but it seems like it requires the highcharts-more.js library and I cannot get it to load successfully. Has anyone solved this?

---

<div class="post-metadata">

**Author:** ![StephenChapman](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/stephenchapman/32/1759_2.png) [@StephenChapman](https://forums.knack.com/u/StephenChapman)\
**Post date:** [September 23, 2026, 2:03am UTC](https://forums.knack.com/t/highcharts-in-custom-js/20570/2 "2026-09-23T02:03:30Z")

</div>

Hi @Pieter,

Assuming you’re using **Knack Classic** , this should be possible.

As you’ve mentioned, you’ll need to install highcharts-more.js into your JS code.  
You can refer to my resource: **[Load external JavaScript/CSS files into Knack Classic](https://stephenchapman.knack.com/portal#resources/r/68294334353803030e83d0c6/)** for a snippet of code to do so.  
You will need to use `https://code.highcharts.com/10.3.2/highcharts-more.js`, as it needs to match the version that Knack Classic uses.

```auto
loadExternalFiles([
  { type: 'script', module: false, url: 'https://code.highcharts.com/10.3.2/highcharts-more.js' } // Highcharts More
]);

function loadExternalFiles(files) {
// Per code in resource link
}

```

You can then a view render script like below to render your polar chart.  
You can replace `element-id` with the ID of an element in your view you want to replace, e.g. in a rich text view, you can add a `<div id="element-id"></div>`.  
You’ll also need to replace the example data with your actual Knack record data.

If you can’t get AI to help you build this out, feel free to direct message me!

```js
$(document).on('knack-view-render.view_xx', function (event, view, data) {
  
  Highcharts.chart('element-id', {
    chart: { polar: true },
    title: { text: 'Monthly output by plant (dummy data)' },
    pane: { startAngle: 0, endAngle: 360 },
    xAxis: {
      categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
      tickmarkPlacement: 'on',
      lineWidth: 0
    },
    yAxis: {
      min: 0,
      gridLineInterpolation: 'polygon'
    },
    tooltip: { shared: true, valueSuffix: ' units' },
    plotOptions: {
      series: { pointPlacement: 'on' },
      column: { pointPadding: 0, groupPadding: 0, opacity: 0.6 }
    },
    series: [
      { type: 'column', name: 'Plant A', data: [420, 380, 510, 470, 560, 600, 580, 540, 500, 610, 650, 590] },
      { type: 'line', name: 'Plant B', data: [300, 340, 390, 420, 410, 450, 480, 470, 440, 500, 520, 530] },
      { type: 'area', name: 'Target', data: Array(12).fill(450), fillOpacity: 0.1 }
    ]
  });

});

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/8/87e0c1be7a6437c24949215536b0b473703732ee.png)

---

<div class="post-metadata">

**Author:** ![Pieter](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Pieter](https://forums.knack.com/u/Pieter)\
**Post date:** [October 13, 2026, 8:09am UTC](https://forums.knack.com/t/highcharts-in-custom-js/20570/3 "2026-10-13T08:09:49Z")

</div>

Thank you @StephenChapman! Works like a charm