tkanchan
Posts: 1
Joined: Wed Feb 07, 2024 6:07 am

Combine column and line chart in drilldown (Angular 15)

Is it possible to combine two chart types (Column and line) in drilldown multiple columns in single series (Need to generate trendline on column chart)

PFB dataset

Code: Select all

series: [
  {
    name: 'Retail Customer',
    data: [
      {name: 'customerId|cust 000301', y: 0.26, drilldown: 'div|210|cust 000301'},
      {name: 'customerId|cust 000318', y: 0.65, drilldown: 'div|210|cust 000318'},
      {name: 'customerId|cust 001201', y: 5.32, drilldown: 'div|210|cust 001201'},
      {name: 'customerId|cust 001202', y: 70.5, drilldown: 'div|210|cust 001202'},
      {name: 'customerId|cust 001814', y: 1.17, drilldown: 'div|210|cust 001814'},
      {name: 'customerId|cust 001849', y: 0.91, drilldown: 'div|210|cust 001849'},
      {name: 'customerId|cust 001850', y: 0.19, drilldown: 'div|210|cust 001850'}
    ]
  },
  {
    name: 'Wholesale Customer',
    data: [
      {name: 'customerId|cust 001201', y: 6.17, drilldown: 'div|230|cust 001201'},
      {name: 'customerId|cust 001202', y: 14.83, drilldown: 'div|230|cust 001202'}
    ]
  }
];

drilldown : {
  series: [
    {
      id: 'div|210|cust 000301',
      name: 'div|210',
      data: [{name: 'Strategic', y: 0.26, drilldown: 'is|220|div|210|cust 000301'}]
    },
    {
      id: 'div|210|cust 000318',
      name: 'div|210',
      data: [{name: 'Strategic', y: 0.65, drilldown: 'is|220|div|210|cust 000318'}]
    },
    {
      id: 'div|210|cust 001201',
      name: 'div|210',
      data: [
        {name: 'ONLINE', y: 4.67, drilldown: 'is|210|div|210|cust 001201'},
        {name: 'Strategic', y: 0.65, drilldown: 'is|220|div|210|cust 001201'}
      ]
    },
    {
      id: 'div|210|cust 001202',
      name: 'div|210',
      data: [{name: 'ONLINE', y: 70.5, drilldown: 'is|210|div|210|cust 001202'}]
    },
    {
      id: 'div|210|cust 001814',
      name: 'div|210',
      data: [{name: 'Strategic', y: 1.17, drilldown: 'is|220|div|210|cust 001814'}]
    },
    {
      id: 'div|210|cust 001849',
      name: 'div|210',
      data: [{name: 'ONLINE', y: 0.91, drilldown: 'is|210|div|210|cust 001849'}]
    },
    {
      id: 'div|210|cust 001850',
      name: 'div|210',
      data: [{name: 'Strategic', y: 0.19, drilldown: 'is|220|div|210|cust 001850'}]
    },
    {
      id: 'div|230|cust 001201',
      name: 'div|230',
      data: [{name: 'ONLINE', y: 6.17, drilldown: 'is|210|div|230|cust 001201'}]
    },
    {
      id: 'div|230|cust 001202',
      name: 'div|230',
      data: [{name: 'ONLINE', y: 14.83, drilldown: 'is|210|div|230|cust 001202'}]
    },
    {
      id: 'is|220|div|210|cust 000301',
      name: 'is|220',
      data: [{name: 'Coll', y: 0.26}]
    },
    {
      id: 'is|220|div|210|cust 000318',
      name: 'is|220',
      data: [
        {name: 'OP', y: 0.45},
        {name: 'Coll', y: 0.19}
      ]
    },
    {
      id: 'is|210|div|210|cust 001201',
      name: 'is|210',
      data: [
        {name: 'OP', y: 3.63},
        {name: 'Coll', y: 1.04}
      ]
    },
    {
      id: 'is|220|div|210|cust 001201',
      name: 'is|220',
      data: [{name: 'OP', y: 0.65}]
    },
    {
      id: 'is|210|div|210|cust 001202',
      name: 'is|210',
      data: [
        {name: 'OP', y: 70.43},
        {name: 'Coll', y: 0.06}
      ]
    },
    {
      id: 'is|220|div|210|cust 001814',
      name: 'is|220',
      data: [{name: 'Coll', y: 1.17}]
    },
    {
      id: 'is|210|div|210|cust 001849',
      name: 'is|210',
      data: [{name: 'OP', y: 0.91}]
    },
    {
      id: 'is|220|div|210|cust 001850',
      name: 'is|220',
      data: [{name: 'OP', y: 0.19}]
    },
    {
      id: 'is|210|div|230|cust 001201',
      name: 'is|210',
      data: [{name: 'OP', y: 6.17}]
    },
    {
      id: 'is|210|div|230|cust 001202',
      name: 'is|210',
      data: [{name: 'OP', y: 14.83}]
    }
  ]
};
User avatar
dawid.d
Posts: 755
Joined: Thu Oct 06, 2022 11:31 am

Re: Combine column and line chart in drilldown (Angular 15)

Hello,

Welcome to our forum and thanks for contacting us with your question!

If I understood you correctly, you just need to add two series in the same categories and disable the `allowPointDrilldown` option. Then drilldown at a given point will lead to displaying two series. See the demo below.

Demo: https://jsfiddle.net/BlackLabel/hg7ot0xL/

I hope you will find it useful
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”