Example of 100% Stacked Line in React Chart Component


This React 100% Stacked Line Chart example visualizes the family expenses with 100% stacked line series to identify who spent more money in each category. Data points are enhanced with markers and tooltips.

More Details...


In this example, you can see how to render and configure the 100% stacked line chart. This chart displays multiple series of data as stacked lines, ensuring that the cumulative proportion of each stacked element always totals 100%. Markers are used to represent individual data and its values.

Tooltips are enabled in this example. To see a tooltip in action, hover over a point or tap on a point in touch enabled devices.

Injecting Module

Chart component features are segregated into individual feature-wise modules. To use 100% stacking line series, we need to inject StackingLineSeries module into services.

More information about the 100% stacked line series can be found in this   documentation section.