jqxChart supports multiple chart types in the same chart by defining multiple seriesGroups. In Angular, you configure this in your component’s seriesGroups property and bind it to the component.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:
`
})
export class AppComponent {
data: any[] = [
{ month: ‘Jan’, sales: 30, profit: 12 },
{ month: ‘Feb’, sales: 40, profit: 18 },
{ month: ‘Mar’, sales: 55, profit: 25 },
{ month: ‘Apr’, sales: 70, profit: 28 }
];
seriesGroups: any[] = [
{
type: ‘column’, // first chart type
columnsGapPercent: 50,
series: [
{ dataField: ‘sales’, displayText: ‘Sales’ }
]
},
{
type: ‘line’, // second chart type
series: [
{ dataField: ‘profit’, displayText: ‘Profit’ }
]
}
];
}`
You can mix-and-match these:
‘line’
‘spline’
‘column’
‘stackedcolumn’
‘area’
‘pie’
‘donut’
‘scatter’
‘bubble’
Best regards,
Peter Stoev
jQWidgets Team
https://www.jqwidgets.com/
