Hi,
Smart.Chart fully supports displaying multiple series types together in the same chart, including line + bar combinations.
You just need to define multiple series in the seriesGroups array, each with its own type.
Example: Line + Bar Chart in Smart.Chart
<div id=”chart” style=”width: 800px; height: 500px;”></div>
<script>
const sampleData = [
{ Month: 'January', Sales: 30, Revenue: 200 },
{ Month: 'February', Sales: 40, Revenue: 220 },
{ Month: 'March', Sales: 50, Revenue: 250 },
{ Month: 'April', Sales: 70, Revenue: 300 },
{ Month: 'May', Sales: 60, Revenue: 280 }
];
Smart('#chart', class {
get properties() {
return {
caption: "Sales and Revenue",
description: "Combined Line and Bar Series",
showLegend: true,
dataSource: sampleData,
xAxis: {
dataField: 'Month'
},
valueAxis: {
title: { text: 'Values' }
},
seriesGroups: [
{
type: 'column', // Bar/Column series
series: [
{ dataField: 'Sales', displayText: 'Sales' }
]
},
{
type: 'line', // Line series
series: [
{ dataField: 'Revenue', displayText: 'Revenue' }
]
}
]
}
}
});
</script>
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/
.
