How to Render JavaScript Line Chart and Bar Chart in the Same Diagram?

Description

This article shows how to render a JavaScript Line Chart and a 100% Stacked Bar Chart in the same diagram.

Solution

Line charts and 100% stacked bar charts are great data visualizations. The line chart is handy for tracking trends over time or comparing data points, and you can easily render one by setting the data in the dataSource and mapping the fields to the xName and yName properties in the series. If you want to add markers or data labels to your chart, you can do so by enabling the visible property in the marker or dataLabel.

On the other hand, a 100% stacked bar chart is perfect for comparing the percentage distribution of multiple categories across different groups or subgroups. To add this chart, simply set the type property in the series as StackingBar100.

If you want to display both types of charts in the same diagram, you can add them to the same parent div element. This will allow you to easily compare and contrast the data represented in each chart.

Code Snippet

index.html

<div class="control-section">
   <div id="line-container" align="center"></div>
   <div id="stacked-bar" align="center"></div>
</div>

index.ts

var chart = new ej.charts.Chart({
       background: "black",
       series: [
           {
               type: 'Line',
               dataSource: [
                   { time: '08:00', target: 0, finished: 0 },
                   { time: '09:00', target: 10, finished: 10 },
                   { time: '10:00', target: 20, finished: 20 },
                   { time: '11:00', target: 30, finished: 28 },
                   { time: '12:00', target: 40, finished: 39 },
                   { time: '13:00', target: 40, finished: 41 },
                   { time: '14:00', target: 45, finished: 43 },
                   { time: '15:00', target: 55, finished: 45 },
               ],
               xName: 'time', width: 2, marker: {
                   dataLabel: {
                       visible: true,
                       isFilled: true,
                       fill: 'white',
                   },
               },
               yName: 'target', name: 'IST',
           },
           {
               type: 'Line',
               dataSource: [
                   { time: '08:00', target: 0, finished: 0 },
                   { time: '09:00', target: 10, finished: 10 },
                   { time: '10:00', target: 20, finished: 20 },
                   { time: '11:00', target: 30, finished: 28 },
                   { time: '12:00', target: 40, finished: 39 },
                   { time: '13:00', target: 40, finished: 41 },
                   { time: '14:00', target: 45, finished: 43 },
                   { time: '15:00', target: 55, finished: 45 },
               ],
               xName: 'time', width: 2, marker: {
                   dataLabel: {
                       visible: true,
                       isFilled: true,
                       fill: 'rgb(0,156,130)',
                   },
               },
               yName: 'finished', name: 'SOLL',
           }
       ],
   });
   chart.appendTo('#line-container');
   
   var chart = new ej.charts.Chart({
       series: [
           {
               type: 'StackingBar100',
               dataSource: [
                   { x: 'Ziet', y: 50 }                  
               ],
               xName: 'x', width: 2, fill: "green",
               yName: 'y', name: 'Scheduled down',
           },
           {
               type: 'StackingBar100',
               dataSource: [
                   { x: 'Ziet', y: 30 }
               ],
               xName: 'x', width: 2, fill: "yellow",
               yName: 'y', name: 'Unscheduled down',
           },
           {
               type: 'StackingBar100',
               dataSource: [
                   { x: 'Ziet', y: 20 }
               ],
               xName: 'x', width: 2, fill: "red",
               yName: 'y', name: 'Out of material',
           }
       ]
   });
   chart.appendTo('#stacked-bar');

The following image illustrates the output of the above code.

View Sample in Stackblitz

Conclusion

We hope you enjoyed learning about How to render a JavaScript Line Chart and 100% Stacked Bar Chart in the same diagram.

You can refer to our Javascript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!