Replicating a highcharts type

Question

I have included a Highcharts chart embed on my website. Now I would like to create many additional charts using other series data. However, I would like all of these additional charts have exactly the same styling and be the same type as my chart1. The only things I will have to change in each chart is the subtitle and series name. I can easily just copy my chart1 code and rename it chart2, chart3 etc. and this works fine. However, I would very much like to just replicate my chart1 for the other data series while only changing subtitles and series name for each data series (CHART1 SUBTITLE and CHART1 SERIESNAME).

I have tried different solutions but none worked so far. Below is the code I have made for my chart1.

chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'CHARTNAME',
    style: {
      fontFamily: 'Montserrat,serif',
      spacingTop: 30,
      fontSize: '22px'
    }
  },
  subtitle: {
      text: 'CHART1 SUBTITLE',
      align: 'left',
      x: 55,
      style: {
        fontFamily: 'Montserrat,serif',
        spacingTop: 25,
        color: "#000",
        fontSize: '14px'
      }
  },
  xAxis: {
    categories: [],
    labels: {
      rotation: -20,
    }
  },
  yAxis: {
    title: {
      text: 'TITLETEXT',
      rotation: 270,
      y: -30
    },
  },
  series: [{
    name: 'CHART1 SERIESNAME',
    color: '#006699',
    data: []
  }],
  tooltip: {
    }
  },
};

Below is the code I use to initialize the series data in chart1. Here I have added a 'chart2' and I essentially hoped it would somehow be able to initialize that in 'chart1' and somehow also changing the chart subtitle and series name.

$('chart').ready(function() {
 var tableName = '<?php echo $tableName; ?>'
 $.getJSON("../companychart/chartdataNew.php", {id: escape(tableName)}, function(json) {
        chartOptions.chart1.xAxis.categories = json['XAXIS NAME']['data'];
        chartOptions.chart1.series[0].data = json['SERIES 1']['data'];

        chartOptions.chart2.xAxis.categories = json['XAXIS NAME']['data'];
        chartOptions.chart2.series[0].data = json['SERIES 2']['data'];
 });

Wojciech Chmiel Wojciech Chmiel · Accepted Answer · 2018-11-30T11:14:01

You can use Highcharts.merge method to extend default options (used in each chart) by particular chart options (series, subtitle). Check the demo posted below.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

JS:

var chart1 = {
    subtitle: {
      text: 'CHART1 SUBTITLE',
    },
    series: [{
      name: 'CHART1 SERIESNAME',
      color: '#006699',
      data: [1, 2, 3, 4, 5]
    }]
  },
  chart2 = {
    subtitle: {
      text: 'CHART2 SUBTITLE',
    },
    series: [{
      name: 'CHART2 SERIESNAME',
      color: '#0034ef',
      data: [5, 1, 2, 6, 2]
    }]
  },
  chart3 = {
    subtitle: {
      text: 'CHART3 SUBTITLE',
    },
    series: [{
      name: 'CHART3 SERIESNAME',
      color: '#23ee45',
      data: [3, 5, 2, 3, 1]
    }]
  },
  chartDefaultOptions;

chartDefaultOptions = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'CHARTNAME',
    style: {
      fontFamily: 'Montserrat,serif',
      spacingTop: 30,
      fontSize: '22px'
    }
  },
  subtitle: {
    align: 'left',
    x: 55,
    style: {
      fontFamily: 'Montserrat,serif',
      spacingTop: 25,
      color: "#000",
      fontSize: '14px'
    }
  },
  xAxis: {
    categories: [],
    labels: {
      rotation: -20,
    }
  },
  yAxis: {
    title: {
      text: 'TITLETEXT',
      rotation: 270,
      y: -30
    },
  }
};

Highcharts.chart('container1', Highcharts.merge(chartDefaultOptions, chart1));
Highcharts.chart('container2', Highcharts.merge(chartDefaultOptions, chart2));
Highcharts.chart('container3', Highcharts.merge(chartDefaultOptions, chart3));

Demo: https://jsfiddle.net/BlackLabel/7utogs95/

Replicating a highcharts type

1 Answers