ods-chart: Custom CSS Library

Default view

First, the default view, without any advanced options (ie. straight from the analysis tab).

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

Fields in use:

date_inscribed (date)	extension (numeric)	region
2019	0	Europe and North America
2018	1	Asia and the Pacific
2017	0	Africa
2016	0	Arab States

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

    <div class="row">
        <div class="col-sm-8">
            <div class="ods-box">
                <h2>
                    Area spline - x = date (year)
                </h2>
                <ods-chart>
                    <ods-chart-query context="worldheritagelist"
                                     field-x="date_inscribed"
                                     maxpoints="0"
                                     timescale="year">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="areaspline"
                                         function-y="COUNT">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ods-box">
                <h2>
                    Column chart - x = region
                </h2>
                <ods-chart labels-x-length="20">
                    <ods-chart-query context="worldheritagelist" field-x="region" maxpoints="0">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="column"
                                         function-y="COUNT"
                                         display-values="true"
                                         scientific-display="true">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ods-box">
                <h2>
                    Spline - x = date (year), series-breakdown by region
                </h2>
                <ods-chart align-month="true">
                    <ods-chart-query context="worldheritagelist"
                                     field-x="date_inscribed"
                                     maxpoints="0"
                                     timescale="year"
                                     series-breakdown="region">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="spline"
                                         function-y="COUNT"
                                         scientific-display="true">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
    </div>
</ods-dataset-context>

body {
    background-color: white;
}

.ods-box {
    background-color: var(--boxes-background);
}

Advanced options

Before hacking the CSS, several advanced option can help to optimize the display.

On ods-chart :

single-y-axis="true" : remove the Y axis label on the left. Or with the following additional parameter, rename it.
single-y-axis-label="Nb of sites" : rename the Y axis label on the left.
labels-x-length="20" : increase label length.
display-legend="false" : remove bottom legend BUT beware to create your own legend or chart description somewhere else. Specially for multilines charts.

On ods-chart-query :

category-colors={'x-value':'#FF0000'} : Set a specific color for each X value.

On ods-chart-serie :

label-y="Number of sites by Region" :
color="#FF0000" : Set a specific color for the serie of the chart.
display-values="true" : Display values on top of the serie.

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

Fields in use:

date_inscribed (date)	extension (numeric)	region
2019	0	Europe and North America
2018	1	Asia and the Pacific
2017	0	Africa
2016	0	Arab States

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

    <div class="row">
        <div class="col-sm-8">
            <div class="ods-box">
                <h2>
                    Area spline - x = date (year)
                </h2>
                <h4>
                    Options: color, label-y
                </h4>
                <ods-chart single-y-axis="true">
                    <ods-chart-query context="worldheritagelist"
                                     field-x="date_inscribed"
                                     maxpoints="0"
                                     timescale="year">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="areaspline"
                                         function-y="COUNT"
                                         color="#344980"
                                         label-y="Number of sites by Year">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ods-box">
                <h2>
                    Column chart - x = region
                </h2>
                <h4>
                    Options: labels-x-length, single-y-axis, single-y-axis-label, display-values, color
                </h4>
                <ods-chart labels-x-length="20"
                           single-y-axis="true"
                           single-y-axis-label="Number of sites"
                           display-legend="false">
                    <ods-chart-query context="worldheritagelist" field-x="region" maxpoints="0">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="column"
                                         display-values="true"
                                         function-y="COUNT"
                                         display-values="true"
                                         scientific-display="true"
                                         color="#344980">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ods-box">
                <h2>
                    Spline - x = date (year), series-breakdown by region
                </h2>
                <h4>
                    Options: category-colors, label-y
                </h4>
                <ods-chart>
                    <ods-chart-query context="worldheritagelist"
                                     field-x="date_inscribed"
                                     maxpoints="0"
                                     timescale="year"
                                     series-breakdown="region"
                                     category-colors="{
                                         'Europe and North America':'#1979a9',
                                         'Asia and the Pacific':'#e07b39',
                                         'Latin America and the Caribbean':'#80391e',
                                         'Africa':'#042f66',
                                         'Arab States':'#44bcd8'
                                         }">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="spline"
                                         function-y="COUNT"
                                         scientific-display="true"
                                         label-y="Number of sites by Region">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
    </div>
</ods-dataset-context>

body {
    background-color: white;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row > * {
    flex-grow: 1;
    margin-bottom: 20px;
}
/* Fix for early content wrapping in Safari*/
.row:before,
.row:after {
    content: normal;
}
.ods-box {
    height: 100%;
    background-color: var(--boxes-background);
}

ods-chart custom CSS library

This resource introduces a custom CSS library dedicated to ods-chart, it helps users to customize their charts easily by simply adding CSS classes to ods-chart tag. To install it, simply copy the CSS code of this resource, and paste it into your page.

CSS classes follows this pattern : value-[axis]-chartproperty.

Chart properties can be :

axisline
gridline
axisline-ticks
chart-series
chart-legend-dash
chart-legend-circle
values
legend

Axis can be x or y

For paths, like axislines, gridlines, ticks, chart series, legend dashes and chart legend circles, value can be :

small
medium
large
extralarge

For texts, like legends and values, value can be :

light
normal
bold

For paths and texts that can be colored, value can be :

lightgrey
darkgrey
black

Chart properties that can’t be disabled by ods-chart parameters, can be hidden with hide as the value

Other specific properties :

centered-tooltip : to center the text in mouse hover tooltip
transparent-background, remove-background, no-background, no-bg : get rid of the default white background.

Examples:

Hide Y values : hide-y-values
Hide X legend : hide-x-legend
Bold weight for Y values font : bold-y-values
Black color for Y legend font : black-y-legend
Larger stroke for chart series : large-chart-series
Extralarge dash in chart legend (for line/spline series) : extralarge-chart-legend-dash
etc…

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

Fields in use:

date_inscribed (date)	extension (numeric)	region
2019	0	Europe and North America
2018	1	Asia and the Pacific
2017	0	Africa
2016	0	Arab States

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

    <div class="row">
        <div class="col-sm-8">
            <div class="ods-box">
                <h2>
                    Area spline - x = date (year)
                </h2>
                <h4>
                    CSS classes: no-bg, hide-x-legend, medium-x-axisline, medium-x-axisline-ticks, black-x-axisline, black-x-axisline-ticks, normal-y-values, large-x-values
                </h4>
                <ods-chart class="no-bg hide-x-legend medium-x-axisline medium-chart-series medium-x-axisline-ticks black-x-axisline black-x-axisline-ticks normal-y-values large-x-values"
                           single-y-axis="true">
                    <ods-chart-query context="worldheritagelist"
                                     field-x="date_inscribed"
                                     maxpoints="0"
                                     timescale="year">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="areaspline"
                                         function-y="COUNT"
                                         color="#344980"
                                         label-y="Number of sites by Year">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ods-box">
                <h2>
                    Column chart - x = region
                </h2>
                <h4>
                    CSS classes : no-bg, hide-x-legend, hide-y-values, large-data-values, large-data-values, large-y-legend, hide-y-gridline, small-y-gridline, medium-x-values
                </h4>
                <ods-chart class="no-bg hide-x-legend hide-y-values large-data-values large-data-values large-y-legend hide-y-gridline small-y-gridline medium-x-values"
                           labels-x-length="20"
                           single-y-axis="true"
                           single-y-axis-label="Number of sites"
                           display-legend="false">
                    <ods-chart-query context="worldheritagelist" field-x="region" maxpoints="0">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="column"
                                         display-values="true"
                                         function-y="COUNT"
                                         display-values="true"
                                         scientific-display="true"
                                         color="#344980">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ods-box">
                <h2>
                    Spline - x = date (year), series-breakdown by region
                </h2>
                <h4>
                    CSS classes : no-bg, hide-x-legend, normal-x-values, extralarge-chart-legend-dash
                </h4>
                <ods-chart class="no-bg hide-x-legend normal-x-values extralarge-chart-legend-dash">
                    <ods-chart-query context="worldheritagelist"
                                     field-x="date_inscribed"
                                     maxpoints="0"
                                     timescale="year"
                                     series-breakdown="region"
                                     category-colors="{
                                         'Europe and North America':'#1979a9',
                                         'Asia and the Pacific':'#e07b39',
                                         'Latin America and the Caribbean':'#80391e',
                                         'Africa':'#042f66',
                                         'Arab States':'#44bcd8'
                                         }">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="spline"
                                         function-y="COUNT"
                                         scientific-display="true"
                                         label-y="Number of sites by Region">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
    </div>
</ods-dataset-context>

<style>
    body {
        background-color: white;
    }
    .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .row > * {
        flex-grow: 1;
        margin-bottom: 20px;
    }
    /* Fix for early content wrapping in Safari*/
    .row:before,
    .row:after {
        content: normal;
    }
    .ods-box {
        height: 100%;
        background-color: var(--boxes-background);
    }
</style>

/**
 * License: MIT License
 * Generated on 26 May 2021
 * Author: Fpassaniti for Opendatasoft
 * Version: 0.1
 * Description: ods-chart CUSTOM CSS LIBRARY. Go to http://codelibrary.opendatasoft.com/widget-tricks/ods-chart-css/ for more information (doc & examples).
 */

.extralarge-y-values .highcharts-yaxis-labels text,.large-y-values .highcharts-yaxis-labels text{transform:translate(0,4px)}.hide-chart-legend .highcharts-legend-item span,.hide-chart-series .highcharts-series path.highcharts-graph,.hide-chart-series .highcharts-series rect,.hide-data-values .highcharts-data-label tspan,.hide-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.hide-tooltip-text .ods-highcharts__tooltip span,.hide-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.hide-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.hide-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.hide-x-legend .highcharts-xaxis tspan,.hide-x-values .highcharts-xaxis-labels span,.hide-x-values .highcharts-xaxis-labels text,.hide-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.hide-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line,.hide-y-legend .highcharts-yaxis tspan,.hide-y-values .highcharts-yaxis-labels span,.hide-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{display:none!important}.highcharts-axis tspan,.highcharts-data-label tspan,.highcharts-label span,.highcharts-legend-item span,.highcharts-xaxis-labels text,.highcharts-yaxis-labels text{font-family:Gotham-book,Arial,sans-serif!important}.name-tooltip-value .ods-highcharts__tooltip b,.small-chart-legend .highcharts-legend-item span,.small-data-values .highcharts-data-label tspan,.small-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.small-tooltip-text .ods-highcharts__tooltip span,.small-x-legend .highcharts-xaxis tspan,.small-x-values .highcharts-xaxis-labels span,.small-x-values .highcharts-xaxis-labels text,.small-y-legend .highcharts-yaxis tspan,.small-y-values .highcharts-yaxis-labels span,.small-y-values .highcharts-yaxis-labels text{font-size:12px!important}.medium-chart-legend .highcharts-legend-item span,.medium-data-values .highcharts-data-label tspan,.medium-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.medium-tooltip-text .ods-highcharts__tooltip span,.medium-x-legend .highcharts-xaxis tspan,.medium-x-values .highcharts-xaxis-labels span,.medium-x-values .highcharts-xaxis-labels text,.medium-y-legend .highcharts-yaxis tspan,.medium-y-values .highcharts-yaxis-labels span,.medium-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-size:14px!important}.large-chart-legend .highcharts-legend-item span,.large-data-values .highcharts-data-label tspan,.large-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.large-tooltip-text .ods-highcharts__tooltip span,.large-x-legend .highcharts-xaxis tspan,.large-x-values .highcharts-xaxis-labels span,.large-x-values .highcharts-xaxis-labels text,.large-y-legend .highcharts-yaxis tspan,.large-y-values .highcharts-yaxis-labels span,.large-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-size:16px!important}.extralarge-chart-legend .highcharts-legend-item span,.extralarge-data-values .highcharts-data-label tspan,.extralarge-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.extralarge-tooltip-text .ods-highcharts__tooltip span,.extralarge-x-legend .highcharts-xaxis tspan,.extralarge-x-values .highcharts-xaxis-labels span,.extralarge-x-values .highcharts-xaxis-labels text,.extralarge-y-legend .highcharts-yaxis tspan,.extralarge-y-values .highcharts-yaxis-labels span,.extralarge-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-size:18px!important}.light-chart-legend .highcharts-legend-item span,.light-data-values .highcharts-data-label tspan,.light-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.light-tooltip-text .ods-highcharts__tooltip span,.light-x-legend .highcharts-xaxis tspan,.light-x-values .highcharts-xaxis-labels span,.light-x-values .highcharts-xaxis-labels text,.light-y-legend .highcharts-yaxis tspan,.light-y-values .highcharts-yaxis-labels span,.light-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-weight:100!important}.name-tooltip-value .ods-highcharts__tooltip b,.normal-chart-legend .highcharts-legend-item span,.normal-data-values .highcharts-data-label tspan,.normal-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.normal-tooltip-text .ods-highcharts__tooltip span,.normal-x-legend .highcharts-xaxis tspan,.normal-x-values .highcharts-xaxis-labels span,.normal-x-values .highcharts-xaxis-labels text,.normal-y-legend .highcharts-yaxis tspan,.normal-y-values .highcharts-yaxis-labels span,.normal-y-values .highcharts-yaxis-labels text{font-weight:400!important}.bold-chart-legend .highcharts-legend-item span,.bold-data-values .highcharts-data-label tspan,.bold-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.bold-tooltip-text .ods-highcharts__tooltip span,.bold-x-legend .highcharts-xaxis tspan,.bold-x-values .highcharts-xaxis-labels span,.bold-x-values .highcharts-xaxis-labels text,.bold-y-legend .highcharts-yaxis tspan,.bold-y-values .highcharts-yaxis-labels span,.bold-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-weight:600!important}.lightgrey-chart-legend .highcharts-legend-item span,.lightgrey-data-values .highcharts-data-label tspan,.lightgrey-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.lightgrey-tooltip-text .ods-highcharts__tooltip span,.lightgrey-x-legend .highcharts-xaxis tspan,.lightgrey-x-values .highcharts-xaxis-labels span,.lightgrey-x-values .highcharts-xaxis-labels text,.lightgrey-y-legend .highcharts-yaxis tspan,.lightgrey-y-values .highcharts-yaxis-labels span,.lightgrey-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{fill:#565656!important;color:#565656!important}.darkgrey-chart-legend .highcharts-legend-item span,.darkgrey-data-values .highcharts-data-label tspan,.darkgrey-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.darkgrey-tooltip-text .ods-highcharts__tooltip span,.darkgrey-x-legend .highcharts-xaxis tspan,.darkgrey-x-values .highcharts-xaxis-labels span,.darkgrey-x-values .highcharts-xaxis-labels text,.darkgrey-y-legend .highcharts-yaxis tspan,.darkgrey-y-values .highcharts-yaxis-labels span,.darkgrey-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{fill:#333!important;color:#333!important}.black-chart-legend .highcharts-legend-item span,.black-data-values .highcharts-data-label tspan,.black-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.black-tooltip-text .ods-highcharts__tooltip span,.black-x-legend .highcharts-xaxis tspan,.black-x-values .highcharts-xaxis-labels span,.black-x-values .highcharts-xaxis-labels text,.black-y-legend .highcharts-yaxis tspan,.black-y-values .highcharts-yaxis-labels span,.black-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{fill:#000!important;color:#000!important}.small-chart-legend-dash .highcharts-legend-item path,.small-chart-series .highcharts-series path.highcharts-graph,.small-chart-series .highcharts-series rect,.small-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.small-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.small-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.small-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.small-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke-width:.8px!important}.medium-chart-legend-dash .highcharts-legend-item path,.medium-chart-series .highcharts-series path.highcharts-graph,.medium-chart-series .highcharts-series rect,.medium-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.medium-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.medium-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.medium-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.medium-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke-width:1.5px!important}.large-chart-legend-dash .highcharts-legend-item path,.large-chart-series .highcharts-series path.highcharts-graph,.large-chart-series .highcharts-series rect,.large-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.large-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.large-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.large-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.large-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke-width:3px!important}.extralarge-chart-legend-dash .highcharts-legend-item path,.extralarge-chart-series .highcharts-series path.highcharts-graph,.extralarge-chart-series .highcharts-series rect,.extralarge-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.extralarge-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.extralarge-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.extralarge-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.extralarge-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke-width:5px!important}.lightgrey-chart-series .highcharts-series path.highcharts-graph,.lightgrey-chart-series .highcharts-series rect,.lightgrey-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.lightgrey-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.lightgrey-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.lightgrey-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.lightgrey-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke:#565656!important}.lightgrey-chart-legend-dash .highcharts-legend-item path{stroke-width:#565656!important}.darkgrey-chart-series .highcharts-series path.highcharts-graph,.darkgrey-chart-series .highcharts-series rect,.darkgrey-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.darkgrey-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.darkgrey-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.darkgrey-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.darkgrey-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke:#333!important}.darkgrey-chart-legend-dash .highcharts-legend-item path{stroke-width:#333!important}.black-chart-series .highcharts-series path.highcharts-graph,.black-chart-series .highcharts-series rect,.black-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.black-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.black-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.black-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.black-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke:#000!important}.black-chart-legend-dash .highcharts-legend-item path{stroke-width:#000!important}.hide-chart-legend-dash .highcharts-legend-item path{stroke-width:none!important}.small-chart-legend-circle g.highcharts-legend-item rect{width:10px!important;height:10px!important;x:5!important;y:5!important}.medium-chart-legend-circle g.highcharts-legend-item rect{width:12px!important;height:12px!important;x:3!important;y:4!important}.large-chart-legend-circle g.highcharts-legend-item rect{width:15px!important;height:15px!important;x:2!important;y:2!important}.extralarge-chart-legend-circle g.highcharts-legend-item rect{width:18px!important;height:18px!important;x:0!important;y:0!important}.centered-tooltip .highcharts-tooltip .highcharts-tooltip-container{text-align:center}.centered-tooltip .ods-highcharts__tooltip{justify-content:center}.no-background rect.highcharts-background,.no-bg rect.highcharts-background,.remove-background rect.highcharts-background,.transparent-background rect.highcharts-background{fill:transparent!important}.ods-highcharts__tooltip{align-items:center}g.highcharts-legend-item rect{rx:100%;ry:100%}

Final touch with advanced CSS

To finish, specific CSS can be set on some chart elements, like linear gradient to modify line/spline areas and bars/columns.

This example cover the linear gradient, it is declared in the HTML, and applied through the CSS.

More example to come.

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

Fields in use:

date_inscribed (date)	extension (numeric)	region
2019	0	Europe and North America
2018	1	Asia and the Pacific
2017	0	Africa
2016	0	Arab States

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

    <div class="row">
        <div class="col-sm-8">
            <div class="ods-box">
                <h2>
                    Area spline - x = date (year)
                </h2>
                <h4>
                    linear gradient top to bottom + small-chart-series, small-chart-legend-circle
                </h4>
                <ods-chart class="no-bg hide-x-legend medium-x-axisline small-chart-series small-chart-legend-circle medium-x-axisline-ticks black-x-axisline black-x-axisline-ticks normal-y-values large-x-values"
                           single-y-axis="true">
                    <ods-chart-query context="worldheritagelist"
                                     field-x="date_inscribed"
                                     maxpoints="0"
                                     timescale="year">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="areaspline"
                                         function-y="COUNT"
                                         color="#344980"
                                         label-y="Number of sites by Year">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ods-box">
                <h2>
                    Column chart - x = region
                </h2>
                <h4>
                    linear gradient left to center to right
                </h4>
                <ods-chart class="no-bg hide-x-legend hide-y-values large-data-values large-data-values large-y-legend hide-y-gridline small-y-gridline medium-x-values small-chart-series darkgrey-chart-series"
                           labels-x-length="20"
                           single-y-axis="true"
                           single-y-axis-label="Number of sites"
                           display-legend="false">
                    <ods-chart-query context="worldheritagelist" field-x="region" maxpoints="0">
                        <ods-chart-serie expression-y="extension"
                                         chart-type="column"
                                         display-values="true"
                                         function-y="COUNT"
                                         display-values="true"
                                         scientific-display="true"
                                         color="#344980">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
            </div>
        </div>
    </div>
</ods-dataset-context>


<!-- Areas and item background -->
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
    <linearGradient id="svg-gradient" x1="1" x2="0" y1="0" y2="0">
        <stop offset="0%" stop-color="rgba(78,110,191,0.5)"></stop>
        <stop offset="20%" stop-color="rgba(78,110,191,0.1)"></stop>
        <stop offset="50%" stop-color="rgba(78,110,191,0)"></stop>
        <stop offset="80%" stop-color="rgba(78,110,191,0.1)"></stop>
        <stop offset="100%" stop-color="rgba(78,110,191,0.5)"></stop>
    </linearGradient>
</svg>

<!-- Areas and item background -->
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
    <linearGradient id="gradient-top-bottom" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="rgba(78,110,191,0.3)"></stop>
        <stop offset="80%" stop-color="rgba(78,110,191,0.1)"></stop>
        <stop offset="100%" stop-color="rgba(78,110,191,0.00)"></stop>
    </linearGradient>
</svg>

/**
 * License: MIT License
 * Generated on 26 May 2021
 * Author: Fpassaniti for Opendatasoft
 * Version: 0.1
 * Description: ods-chart CUSTOM CSS LIBRARY. Go to http://codelibrary.opendatasoft.com/widget-tricks/ods-chart-css/ for more information (doc & examples).
 */

.extralarge-y-values .highcharts-yaxis-labels text,.large-y-values .highcharts-yaxis-labels text{transform:translate(0,4px)}.hide-chart-legend .highcharts-legend-item span,.hide-chart-series .highcharts-series path.highcharts-graph,.hide-chart-series .highcharts-series rect,.hide-data-values .highcharts-data-label tspan,.hide-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.hide-tooltip-text .ods-highcharts__tooltip span,.hide-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.hide-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.hide-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.hide-x-legend .highcharts-xaxis tspan,.hide-x-values .highcharts-xaxis-labels span,.hide-x-values .highcharts-xaxis-labels text,.hide-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.hide-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line,.hide-y-legend .highcharts-yaxis tspan,.hide-y-values .highcharts-yaxis-labels span,.hide-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{display:none!important}.highcharts-axis tspan,.highcharts-data-label tspan,.highcharts-label span,.highcharts-legend-item span,.highcharts-xaxis-labels text,.highcharts-yaxis-labels text{font-family:Gotham-book,Arial,sans-serif!important}.name-tooltip-value .ods-highcharts__tooltip b,.small-chart-legend .highcharts-legend-item span,.small-data-values .highcharts-data-label tspan,.small-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.small-tooltip-text .ods-highcharts__tooltip span,.small-x-legend .highcharts-xaxis tspan,.small-x-values .highcharts-xaxis-labels span,.small-x-values .highcharts-xaxis-labels text,.small-y-legend .highcharts-yaxis tspan,.small-y-values .highcharts-yaxis-labels span,.small-y-values .highcharts-yaxis-labels text{font-size:12px!important}.medium-chart-legend .highcharts-legend-item span,.medium-data-values .highcharts-data-label tspan,.medium-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.medium-tooltip-text .ods-highcharts__tooltip span,.medium-x-legend .highcharts-xaxis tspan,.medium-x-values .highcharts-xaxis-labels span,.medium-x-values .highcharts-xaxis-labels text,.medium-y-legend .highcharts-yaxis tspan,.medium-y-values .highcharts-yaxis-labels span,.medium-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-size:14px!important}.large-chart-legend .highcharts-legend-item span,.large-data-values .highcharts-data-label tspan,.large-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.large-tooltip-text .ods-highcharts__tooltip span,.large-x-legend .highcharts-xaxis tspan,.large-x-values .highcharts-xaxis-labels span,.large-x-values .highcharts-xaxis-labels text,.large-y-legend .highcharts-yaxis tspan,.large-y-values .highcharts-yaxis-labels span,.large-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-size:16px!important}.extralarge-chart-legend .highcharts-legend-item span,.extralarge-data-values .highcharts-data-label tspan,.extralarge-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.extralarge-tooltip-text .ods-highcharts__tooltip span,.extralarge-x-legend .highcharts-xaxis tspan,.extralarge-x-values .highcharts-xaxis-labels span,.extralarge-x-values .highcharts-xaxis-labels text,.extralarge-y-legend .highcharts-yaxis tspan,.extralarge-y-values .highcharts-yaxis-labels span,.extralarge-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-size:18px!important}.light-chart-legend .highcharts-legend-item span,.light-data-values .highcharts-data-label tspan,.light-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.light-tooltip-text .ods-highcharts__tooltip span,.light-x-legend .highcharts-xaxis tspan,.light-x-values .highcharts-xaxis-labels span,.light-x-values .highcharts-xaxis-labels text,.light-y-legend .highcharts-yaxis tspan,.light-y-values .highcharts-yaxis-labels span,.light-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-weight:100!important}.name-tooltip-value .ods-highcharts__tooltip b,.normal-chart-legend .highcharts-legend-item span,.normal-data-values .highcharts-data-label tspan,.normal-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.normal-tooltip-text .ods-highcharts__tooltip span,.normal-x-legend .highcharts-xaxis tspan,.normal-x-values .highcharts-xaxis-labels span,.normal-x-values .highcharts-xaxis-labels text,.normal-y-legend .highcharts-yaxis tspan,.normal-y-values .highcharts-yaxis-labels span,.normal-y-values .highcharts-yaxis-labels text{font-weight:400!important}.bold-chart-legend .highcharts-legend-item span,.bold-data-values .highcharts-data-label tspan,.bold-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.bold-tooltip-text .ods-highcharts__tooltip span,.bold-x-legend .highcharts-xaxis tspan,.bold-x-values .highcharts-xaxis-labels span,.bold-x-values .highcharts-xaxis-labels text,.bold-y-legend .highcharts-yaxis tspan,.bold-y-values .highcharts-yaxis-labels span,.bold-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{font-weight:600!important}.lightgrey-chart-legend .highcharts-legend-item span,.lightgrey-data-values .highcharts-data-label tspan,.lightgrey-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.lightgrey-tooltip-text .ods-highcharts__tooltip span,.lightgrey-x-legend .highcharts-xaxis tspan,.lightgrey-x-values .highcharts-xaxis-labels span,.lightgrey-x-values .highcharts-xaxis-labels text,.lightgrey-y-legend .highcharts-yaxis tspan,.lightgrey-y-values .highcharts-yaxis-labels span,.lightgrey-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{fill:#565656!important;color:#565656!important}.darkgrey-chart-legend .highcharts-legend-item span,.darkgrey-data-values .highcharts-data-label tspan,.darkgrey-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.darkgrey-tooltip-text .ods-highcharts__tooltip span,.darkgrey-x-legend .highcharts-xaxis tspan,.darkgrey-x-values .highcharts-xaxis-labels span,.darkgrey-x-values .highcharts-xaxis-labels text,.darkgrey-y-legend .highcharts-yaxis tspan,.darkgrey-y-values .highcharts-yaxis-labels span,.darkgrey-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{fill:#333!important;color:#333!important}.black-chart-legend .highcharts-legend-item span,.black-data-values .highcharts-data-label tspan,.black-tooltip-text .highcharts-tooltip .highcharts-tooltip-container,.black-tooltip-text .ods-highcharts__tooltip span,.black-x-legend .highcharts-xaxis tspan,.black-x-values .highcharts-xaxis-labels span,.black-x-values .highcharts-xaxis-labels text,.black-y-legend .highcharts-yaxis tspan,.black-y-values .highcharts-yaxis-labels span,.black-y-values .highcharts-yaxis-labels text,.name-tooltip-value .ods-highcharts__tooltip b{fill:#000!important;color:#000!important}.small-chart-legend-dash .highcharts-legend-item path,.small-chart-series .highcharts-series path.highcharts-graph,.small-chart-series .highcharts-series rect,.small-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.small-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.small-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.small-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.small-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke-width:.8px!important}.medium-chart-legend-dash .highcharts-legend-item path,.medium-chart-series .highcharts-series path.highcharts-graph,.medium-chart-series .highcharts-series rect,.medium-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.medium-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.medium-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.medium-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.medium-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke-width:1.5px!important}.large-chart-legend-dash .highcharts-legend-item path,.large-chart-series .highcharts-series path.highcharts-graph,.large-chart-series .highcharts-series rect,.large-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.large-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.large-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.large-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.large-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke-width:3px!important}.extralarge-chart-legend-dash .highcharts-legend-item path,.extralarge-chart-series .highcharts-series path.highcharts-graph,.extralarge-chart-series .highcharts-series rect,.extralarge-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.extralarge-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.extralarge-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.extralarge-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.extralarge-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke-width:5px!important}.lightgrey-chart-series .highcharts-series path.highcharts-graph,.lightgrey-chart-series .highcharts-series rect,.lightgrey-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.lightgrey-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.lightgrey-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.lightgrey-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.lightgrey-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke:#565656!important}.lightgrey-chart-legend-dash .highcharts-legend-item path{stroke-width:#565656!important}.darkgrey-chart-series .highcharts-series path.highcharts-graph,.darkgrey-chart-series .highcharts-series rect,.darkgrey-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.darkgrey-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.darkgrey-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.darkgrey-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.darkgrey-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke:#333!important}.darkgrey-chart-legend-dash .highcharts-legend-item path{stroke-width:#333!important}.black-chart-series .highcharts-series path.highcharts-graph,.black-chart-series .highcharts-series rect,.black-x-axisline .highcharts-axis.highcharts-xaxis path.highcharts-axis-line,.black-x-axisline-ticks .highcharts-axis.highcharts-xaxis path.highcharts-tick,.black-x-gridline .highcharts-xaxis-grid path.highcharts-grid-line,.black-y-axisline .highcharts-axis.highcharts-yaxis path.highcharts-axis-line,.black-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line{stroke:#000!important}.black-chart-legend-dash .highcharts-legend-item path{stroke-width:#000!important}.hide-chart-legend-dash .highcharts-legend-item path{stroke-width:none!important}.small-chart-legend-circle g.highcharts-legend-item rect{width:10px!important;height:10px!important;x:5!important;y:5!important}.medium-chart-legend-circle g.highcharts-legend-item rect{width:12px!important;height:12px!important;x:3!important;y:4!important}.large-chart-legend-circle g.highcharts-legend-item rect{width:15px!important;height:15px!important;x:2!important;y:2!important}.extralarge-chart-legend-circle g.highcharts-legend-item rect{width:18px!important;height:18px!important;x:0!important;y:0!important}.centered-tooltip .highcharts-tooltip .highcharts-tooltip-container{text-align:center}.centered-tooltip .ods-highcharts__tooltip{justify-content:center}.no-background rect.highcharts-background,.no-bg rect.highcharts-background,.remove-background rect.highcharts-background,.transparent-background rect.highcharts-background{fill:transparent!important}.ods-highcharts__tooltip{align-items:center}g.highcharts-legend-item rect{rx:100%;ry:100%}

/* Extra style */
body {
    background-color: white;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row > * {
    flex-grow: 1;
    margin-bottom: 20px;
}
/* Fix for early content wrapping in Safari*/
.row:before,
.row:after {
    content: normal;
}
.ods-box {
    height: 100%;
    background-color: var(--boxes-background);
}
/** DO NOT COPY CSS ABOVE THIS LINE, FOR DISPLAY/LAYOUT NEEDS OF THE EXAMPLE **/


/*** Custom CSS for charts ***/

/* Columns / Bars */
.highcharts-series rect {
    stroke: var(--chartColor);
    /* Fill with svg gradient declared in HTML code */
    fill: url(#svg-gradient) !important;
}

/* Areas */
.highcharts-series path.highcharts-area {
    /* Fill with svg gradient declared in HTML code */
    fill: url(#gradient-top-bottom) !important;
}

Widget Tricks - ods-chart: Custom CSS Library

Default view

Advanced options

ods-chart custom CSS library

Final touch with advanced CSS