PrimeFaces Extensions Showcase

EChart

Apache ECharts can be exported to PNG, JPG, or SVG as well as printed.

Source

XHTML page


                <script>
        //<![CDATA[
        function exportChart() {
            //export image
            $('#output').empty().append(PF('exportEChart').exportAsImage());

            //show the dialog
            PF('dlg').show();
        };

        //]]>
    </script>

    <pe:echart style="width: 50vw; height: 400px;"  id="echart" widgetVar="exportEChart" value="#{eChartController.json}">
        <p:ajax event="itemSelect" listener="#{eChartController.itemSelect}" />
    </pe:echart>

    <p:commandButton type="button" value="Export" icon="pi pi-home" onclick="exportChart()" styleClass="mr-2 mb-2"/>
    <p:commandButton type="button" value="Print"  icon="pi pi-print" onclick="PF('exportEChart').print()" styleClass="mr-2 mb-2"/>

    <p:dialog widgetVar="dlg" showEffect="fade" modal="true" header="Chart as an Image" resizable="false">
        <p:outputPanel id="output" layout="block" style="width: 50vw; height: 400px;"/>
    </p:dialog>

Components and more

Use Cases

Documentation pe:echart

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a namingContainer.
rendered	Boolean value to specify the rendering of the component, when Set false component will not be rendered.
binding	An el expression referring to a server side UIComponent instance in a backing bean.
widgetVar	Name of the client side widget.
value	JSON value of the chart.
style	Inline style of the component. Typically, height and width of the chart are defined here.
styleClass	Style class of the component.
theme	The theme to style the chart with. Can be a theme name imported in JS or "light" or "dark".
extender	Name of javascript function to extend the options of the underlying EChart plugin.

PrimeFaces: 15.0.5,

PrimeFaces Extensions: 15.0.6-SNAPSHOT,

JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,

Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),

Build time: 2025-06-13 20:21