Support » Fixing WordPress » Highcharts

  • I am trying to incorporate Highcharts (javascript) into a WP site. I would be grateful for any advice and perhaps this could serve anyone else trying to implement this.

    I have the following (which fails to load any kind of chart):

    1. After meta and before stylesheets in the theme/header.php:

    <script type="text/javascript" src="<?php get_template_directory_uri(); ?>/script/highcharts.js"></script>

    2. I have created a customs function plugin with the following inside:

    add_action( 'wp_enqueue_scripts', 'myname_load_javascript_files' );
    // Register some javascript files and enqueue main script: 
    function myname_load_javascript_files() {
      wp_register_script( 'highcharts', get_template_directory_uri() . '/scripts/highcharts.js' );
      wp_register_script( 'highstock', get_template_directory_uri() . '/scripts/highstock.js' );
      wp_register_script( 'jquery', get_template_directory_uri().'scripts/jquery/jquery.js', array('jquery'), '1.8.3', true );
      wp_enqueue_script( 'highcharts' );

    3. In my post where I want a chart to appear (using the first example on the Highcharts site) I have put some js and a container :

    <script type="text/javascript" src=""> </script>
    <script type="text/javascript">
     jQuery(document).ready(function() {
        var chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            title: {
                text: 'Fruit Consumption'
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            yAxis: {
                title: {
                    text: 'Fruit eaten'
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
    <div id="container" style="height: 300px"></div>

    Any help much appreciated. Thank you.

  • The topic ‘Highcharts’ is closed to new replies.