ods-chart: CSS Hacks – Codelibrary

Lighten “display-values”

display-values=true option displays for each point of a chart the values of the series. It’s usefull but can quickly overload the chart and displaying only a view values can be interesting.

This code presents some CSS tricks to cherry-pick only a few values :

On the left, only the first and last values
On the right, 1 out of 3 values are displayed (see the CSS code for explanations)

Dataset in use: world-heritage-list (See it on userclub domain)

Fields in use:

date_inscribed (date)	extension (numeric)
2019	0
2018	1
2017	0
2016	0

<ods-dataset-context context="worldheritagelist"
                     worldheritagelist-domain="userclub"
                     worldheritagelist-dataset="world-heritage-list">

    <div class="row">
        <div class="col-sm-6">
            <div class="ods-box">
                <h2>
                    First and last values
                </h2>
                <ods-chart class="first-last-values">
                    <ods-chart-query context="worldheritagelist"
                                     field-x="date_inscribed"
                                     maxpoints="0"
                                     timescale="year">
                        <ods-chart-serie display-values="true"
                                         expression-y="extension"
                                         chart-type="areaspline"
                                         function-y="COUNT"
                                         label-y="Number of sites by Year">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ods-box">
                <h2>
                    1 out of 3
                </h2>
                <ods-chart class="cherry-pick-values">
                    <ods-chart-query context="worldheritagelist"
                                     field-x="date_inscribed"
                                     maxpoints="0"
                                     timescale="year"
                                     display-legend="false">
                        <ods-chart-serie display-values="true"
                                         expression-y="extension"
                                         chart-type="areaspline"
                                         function-y="COUNT"
                                         label-y="Number of sites by Year">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
    </div>
</ods-dataset-context>

/* Do not copy this part, only necessary for the Code Library example */
.ods-box { background-color: var(--boxes-background);}
rect.highcharts-background { fill: transparent !important }



/************************/
/** ods-chart CSS Hacks */
/************************/


/* Get the first and last values only */
.first-last-values .highcharts-data-label:not(:first-child):not(:last-child) {
    display: none;
}

.first-last-values .highcharts-data-label:first-child,
.first-last-values .highcharts-data-label:last-child {
    opacity: 1;
    visibility: inherit; /* force the last child to be visible, as it can be hidden sometimes */
}



/* Get one value out of three */
/* First, hide them all */
.cherry-pick-values .highcharts-data-label {
    display: none;
}
/* Then, show only one out of ten.
To change the interval number, simply change the 3 from the "3n + 1" expression.
For example, to display 1 value out of 5, try to change the expression to 5n + 1
*/
.cherry-pick-values .highcharts-data-label:nth-child(3n + 1) {
    display: inherit;
    opacity: 1;
    visibility: inherit; /* force the last child to be visible, as it can be hidden sometimes */
}

Lighten X axis legend

X axis legend sometimes needs to be lightened. Displaying one legend out of several is a good trick to make it comfortable to read.

On the left, the default view
On the right, 1 out of 10 values are displayed (see the CSS code for explanations)

Dataset in use: communes-et-arrondissements-municipaux-france (See it on userclub domain)

Fields in use:

dep_name
Eure-et-Loir
Finistère
Gard
Jura

<ods-dataset-context context="communesetarrondissementsmunicipauxfrance" communesetarrondissementsmunicipauxfrance-dataset="communes-et-arrondissements-municipaux-france" communesetarrondissementsmunicipauxfrance-parameters="{'disjunctive.reg_code':true,'disjunctive.reg_name':true,'disjunctive.dep_code':true,'disjunctive.dep_name':true,'disjunctive.arrdep_name':true,'disjunctive.ze2010_name':true,'disjunctive.bv2012_name':true,'disjunctive.epci_code':true,'disjunctive.epci_name':true,'disjunctive.ept_name':true,'disjunctive.com_name':true,'disjunctive.com_arm_code':true,'disjunctive.com_arm_name':true}">

    <div class="row">
        <div class="col-sm-6">
            <div class="ods-box">
                <h2>
                    Default
                </h2>
                <ods-chart single-y-axis="true" single-y-axis-label="Number of cities" labels-x-length="25" align-month="true">
                    <ods-chart-query context="communesetarrondissementsmunicipauxfrance" field-x="dep_name" maxpoints="0">
                        <ods-chart-serie chart-type="bar" function-y="COUNT" label-y="Number of cities by department" color="#00C7B1" scientific-display="true">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ods-box">
                <h2>
                    Lighter version
                </h2>
                <ods-chart class="lighter-y-legend"
                           single-y-axis="true" single-y-axis-label="Number of cities" labels-x-length="25" align-month="true">
                    <ods-chart-query context="communesetarrondissementsmunicipauxfrance" field-x="dep_name" maxpoints="0">
                        <ods-chart-serie chart-type="bar" function-y="COUNT" label-y="Number of cities by department" color="#00C7B1" scientific-display="true">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
    </div>
</ods-dataset-context>

/* Do not copy this part, only necessary for the Code Library example */
.ods-box { background-color: var(--boxes-background);}
rect.highcharts-background { fill: transparent !important }


/************************/
/** ods-chart CSS Hacks */
/************************/


/* Get one value out of ten */
/* first, hide them all */
.lighter-y-legend .highcharts-axis-labels.highcharts-xaxis-labels > * {
    display:none;
}
/* then, show only one out of ten.
To change the interval number, simply change the 10 from the "10n + 1" expression.
For example, to display 1 value out of 5, try to change the expression to 5n + 1
*/
.lighter-y-legend .highcharts-axis-labels.highcharts-xaxis-labels > *:nth-child(10n + 1) {
    display: inherit;
}

Widget Tricks - ods-chart: CSS Hacks

Lighten “display-values”

Lighten X axis legend