1.2.3 - Implement Gauge Chart

• implement Gauge Chart;

How to use:

<GaugeChart
/* the chart data */
    data={[
        {
            value: 0.7,
            name: 'Eficiência'
        }
    ]}
 /* the chart limits and colors. The total value of the limits must be '1' */
    colorLine={[
        [0.25, red[200]],
        [0.5, orange[400]],
        [0.75, amber[200]],
        [1, green[100]]
    ]}
 /* the chart labels. If not passed, defaults as empty. */
    axisLabel={[
        { limit: 0.875, label: 'Ótimo' },
        { limit: 0.625, label: 'Médio' },
        { limit: 0.375, label: 'Ruim' },
        { limit: 0.125, label: 'Péssimo' }
    ]}
 /* the chart legend below. If not passed, defaults as empty. */
    legendData={[
        { icon: <IconLocalHospital />, legend: 42 },
        { icon: <IconPerson />, legend: 71 },
        { icon: <IconRestore />, legend: 77 },
        { icon: <IconWaterDrop />, legend: 76 },
        { icon: <IconVisibility />, legend: 79 }
    ]}
 /* the chart legend value to condition the red/green circle color. If not passed, defaults to 75. */
    legendValue={70}
 /* the chart axis width. If not passed, defaults to 75. */
    axisLineWidth={75}
 /* the chart title font-size. If not passed, defaults to 30. */
    titleFontSize={30}
 /* the chart detail font-size. If not passed, defaults to 24. */
    detailFontSize={24}
 /* the chart height. If not passed, defaults to 400. */
    height={400}
 /* the chart tooltip. If not passed, defaults to empty. */
    tooltip={{
        label: 'Otimização',
        labelComplement: 0.95
    }}
 /* the chart toolbox. If not passed, defaults to empty. */
    toolboxTooltip={{ saveAsImage: { title: 'Salvar como Imagem' } }}
/>