Highcharts in custom JS

API & Custom Code
1

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?

2

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 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.

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!

$(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
image414Ă—416 20.5 KB

3

Thank you @StephenChapman! Works like a charm