#112943
Markov
Keymaster

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/