Highcharts integration with Drupal 8

Highcharts can be integrated with Drupal using highcharts PHP library. For implementation we are going to create custom block in Drupal
Lets us start with creation of custom module, followed by we can create the plugin block.

Module creation:

Create a folder called 'highcharts' under the directory 'modules/custom/'.
Module file require info yml configuration file as mandatory. Create the info yml configuration file 'highcharts.info.yml' under highcharts directory with the following information as show below
File path: highcharts/highcharts.info.yml

name: 'Highcharts'
type: module
description: 'Highcharts integration as plugin block'
core: 8.x
package: 'Custom'

Next, need to create the block through which the highcharts will be render in a page.
Kindly create a HighchartsBlock.php file with the below code snippet
File path: highcharts/src/Plugin/Block/HighchartsBlock.php

namespace Drupal\highcharts\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'HighchartsBlock' block.
 *
 * @Block(
 *  id = "custom_highcharts",
 *  admin_label = @Translation("Highcharts"),
 * )
 */
class HighchartsBlock extends BlockBase {
  /**
   * {@inheritdoc}
   */
  public function build() {
    $build = [];
    $build['#theme'] = 'highcharts-block'; 
    return $build;
  }
}

Create a module file named 'highcharts.module' under highcharts directory for assigning template for the theme assigned to the above block.
File path: highcharts/highcharts.module

/**
 * Implements hook_theme().
 */
function highcharts_theme(){
return [
'highcharts-block' => [
'variables'=> [],
]
];
}

Create a libraries yml configuration file for including highcharts library and custom js.
File path: highcharts/highcharts.libraries.yml

highcharts:
  js:
    https://code.highcharts.com/highcharts.js: {external: true} 
    js/highchart-imp.js: {}
  dependencies:
     - core/jquery

Create a js file, which contains the required data for creating the highcharts graph, you can find the list of types of graph in the following url https://www.highcharts.com/demo
File path: highcharts/js/highchart-imp.js

(function($){
$(document).ready(function(){
var myChart = Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Performance evaluation'
            },
            xAxis: {
                categories: ['Investment', 'Return' ,'Profit', 'Loss']
            },
            yAxis: {
                title: {
                    text: 'Performance Level'
                }
            },
            series: [{
                name: 'Company1',
                data: [5, 7,2, 0]
            }, {
                name: 'Company2',
                data: [5, 2 ,0, 3]
            }]
        });
});

})(jQuery);

After creation of library, we need to create a template file for the theme and include the above mentioned library in the template for render the highcharts.
File path: highcharts/templates/highcharts-block.html.twig

{{ attach_library('highcharts/highcharts') }}
<div id='container' style='width:100%;height:100%;'></div>

After successful creation of highcharts block, it needs to be rendered in any of the region. Goto Manage->Structure->Block layout  and select the block to be displayed is any of the required region. After rendering the block, you will the see highcharts graph as below