Apache eCharts

<h:form>
    <p:messages id="messages" showSummary="false" showDetail="true">
        <p:autoUpdate/>
    </p:messages>

    <div class="card">
        <h5>Facet</h5>
        <pe:echart style="width: 50vw; height: 400px;" widgetVar="facetEChart">
            <p:autoUpdate on="eventTheme"/>
            <p:ajax event="itemSelect" listener="#{eChartController.itemSelect}"/>
            <f:facet name="value">
                {
                series: [
                {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                center: ['50%', '75%'],
                radius: '90%',
                min: 0,
                max: 1,
                splitNumber: 8,
                axisLine: {
                lineStyle: {
                width: 6,
                color: [
                [0.25, '#FF6E76'],
                [0.5, '#FDDD60'],
                [0.75, '#58D9F9'],
                [1, '#7CFFB2']
                ]
                }
                },
                pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '12%',
                width: 20,
                offsetCenter: [0, '-60%'],
                itemStyle: {
                color: 'auto'
                }
                },
                axisTick: {
                length: 12,
                lineStyle: {
                color: 'auto',
                width: 2
                }
                },
                splitLine: {
                length: 20,
                lineStyle: {
                color: 'auto',
                width: 5
                }
                },
                axisLabel: {
                color: '#464646',
                fontSize: 20,
                distance: -60,
                rotate: 'tangential',
                formatter: function (value) {
                if (value === 0.875) {
                return 'Grade A';
                } else if (value === 0.625) {
                return 'Grade B';
                } else if (value === 0.375) {
                return 'Grade C';
                } else if (value === 0.125) {
                return 'Grade D';
                }
                return '';
                }
                },
                title: {
                offsetCenter: [0, '-10%'],
                fontSize: 20
                },
                detail: {
                fontSize: 30,
                offsetCenter: [0, '-35%'],
                valueAnimation: true,
                formatter: function (value) {
                return Math.round(value * 100) + '';
                },
                color: 'inherit'
                },
                data: [
                {
                value: 0.7,
                name: 'Grade Rating'
                }
                ]
                }
                ]
                }
            </f:facet>
        </pe:echart>
    </div>
</h:form>