How Do I Apply Custom CSS to Goal Meters?

To change the appearance of a goal meter please review the sample CSS below.

It’s generally best to use hex color codes (e.g. #4a90e2) when defining colors in CSS. The colors used below without hex codes (e.g. red or orange) are provided for example purposes only.

All Goal Meter Types

The calendar can be shown with any goal meter type when enabled. The CSS below applies regardless of the goal meter style used.

/* Calendar Icon */

.time-container svg {
    /* sets the stroke color for all paths & shapes */
    stroke: red !important; 
}

See the Speedometer example image below to view how the CSS above is rendered.

Speedometer

/* Completed Doughnut */
.doughnut .arc:nth-of-type(1) path {
    fill: #4a90e2 !important;
}

/* Empty Doughnut */
.doughnut .arc:nth-of-type(2) path {
    fill: #000000 !important;
}

/* Needle */
.needle path {
    fill: orange;
}

/* Needle Center Circle */
.needle circle {
    fill: red;
}

/* Give all visible parts a consistent border color and thickness */
.speedometer svg path,
.speedometer svg circle {
    stroke: green; /* border color */
    stroke-width: 2px; /* border thickness */
}

Using the above CSS will display as follows:

goal-meter-speedometer

Progress Bar

.goal-meter-progress-bar {
    background-color: green !important;
    border: 2px solid purple;

    span {
        background-color: red !important;
    }
}

Using the above CSS will display as follows:

goal-meter-progress-bar

Circle

The circle goal meter is a <canvas> html element. Due to technical limitations, elements inside a canvas can’t be styled or modified with CSS selectors like SVGs or standard HTML elements.

However, elements can be altered via JavaScript.