example 5 - abudaan/vega-multi-view GitHub Wiki

import { addViews, removeViews } from '../../src/js/index';

const globalStylingCss = `
    html,
    body {
        color: white;
        background-color: #333;
        padding: 0;
        margin: 0;
    }

    .view {
        padding: 20px;
    }`
;

const spec4StylingCss = `
    .mark-path>path {
        fill: #C4FFC9 !important;
        fill-opacity: 0.3 !important;
        stroke-width: 0.1 !important;
    }

    .mark-path>path:hover {
        fill: #EEEA00 !important;
        fill-opacity: 1 !important;
        stroke-width: 5 !important;
        stroke: #00ffff !important;
    }`
;

const data = {
    styling: {
        css: globalStylingCss,
        addToHead: true,
        overwrite: false,
    },
    specs: {
        spec1: ['./specs/spec4.json', {
            element: 'map',
            leaflet: false,
            renderer: 'svg',
            styling: {
                css: spec4StylingCss,
                cssAppend: true,
                addToHead: true,
                classes: 'view',
            },
        }],
    },
    debug: true,
};

addViews(data)
    .then((result) => {
        console.log(result);
    });

This is an example of how you can add styling (only when using the SVG renderer). Note that we have to add !important to overrule the inline styling that the Vega renderer applies to the SVG elements. We set cssAppend to true to add the new styling rules to the existing ones.