CODEWITHSUNDEEP
javascripthighcharts
doomdaam
doomdaam

Reputation: 783

Highcharts: How to group column chart on category

I have 6 columns and 3 categories I cannot make the columns group on the categories. Can I call the category from within the Series?

My goal is to group MACD BUY and MACD SELL in the MACD category side by side, SMA 7/35 BUY and SMA 7/35 SELL under SMA 7/35 category, etc. You get the drift.

Sorry about below format, I cannot make the snippet feature work. Here is the JSFiddle: http://jsfiddle.net/worb5gyz/

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="Chart" style="width:100%; height:400px; margin-bottom: 5%;">

document.addEventListener('DOMContentLoaded', function () {
            const chart = Highcharts.chart('Chart', {
                chart: {
                    type: 'column'
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                  categories: [
                      'MACD',
                      'SMA 7/35',
                      'SMA 50/200'
                  ]},
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Signal'
                    }
                },
                plotOptions: {
                  column: {
                      pointPadding: 0.2,
                      borderWidth: 0
                    }
                },
                series: [
                      {type:'column',name: 'MACD BUY', data: [7]   },
                      {type:'column',name: 'MACD SELL', data: [6 ]     },
                      {type:'column',name: 'SMA 7/35 BUY', data: [13]   },
                      {type:'column',name: 'SMA 7/35 SELL', data: [4]  },
                      {type:'column',name: 'SMA 50/200 BUY', data: [6] },
                      {type:'column',name: 'SMA 50/200 SELL', data: [1]}
                    ]
            });
        });

EDIT: Tried a different setup after doing some more searching, doesn't work though.

series: [{
                            "data":  [{"name": 'MACD BUY', x:0, data: [<?php echo json_encode($macd_M_BUY);?>]   }] },
                            {"data": [{"name": 'MACD SELL', x:0, data: [<?php echo json_encode($macd_M_SELL);?>]        }] },
                            {"data": [{"name": 'SMA 7/35 BUY', x:1, data: [<?php echo json_encode($sma_s_M_BUY);?>]     }] },
                            {"data": [{"name": 'SMA 7/35 SELL', x:1, data: [<?php echo json_encode($sma_s_M_SELL);?>]   }] },
                            {"data": [{"name": 'SMA 50/200 BUY', x:2, data: [<?php echo json_encode($sma_l_M_BUY);?>]   }] },
                            {"data": [{"name": 'SMA 50/200 SELL', x:2, data: [<?php echo json_encode($sma_l_M_SELL);?>] }] }
                          ]
    ```

Upvotes: 0

Views: 533

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

Add an x position for each data point in your series config:

series: [{
    type: 'column',
    name: 'MACD BUY',
    data: [{x: 0, y: 7}]
  },
  {
    type: 'column',
    name: 'MACD SELL',
    data: [{x: 0, y: 6}]
  },
  {
    type: 'column',
    name: 'SMA 7/35 BUY',
    data: [{x: 1, y: 13}]
  },
  {
    type: 'column',
    name: 'SMA 7/35 SELL',
    data: [{x: 1, y: 4}]
  },
  {
    type: 'column',
    name: 'SMA 50/200 BUY',
    data: [{x: 2, y: 6}]
  },
  {
    type: 'column',
    name: 'SMA 50/200 SELL',
    data: [{x: 2, y: 1}]
  }
]

Demo: http://jsfiddle.net/BlackLabel/qhv4xoLf/

Upvotes: 2

Related Questions