Highcharts test tool

by maritavindedal

HTML

<script src="http://localhost:3031/highcharts.js"></script>
<script src="http://localhost:3031/modules/exporting.js"></script>
<script src="http://localhost:3031/modules/accessibility.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

.highcharts-text-outline {
    opacity: 0.65;
    /*mix-blend-mode: overlay;*/
}

JavaScript

const ren = new Highcharts.Renderer(
	document.getElementById('container'),
    600,
    400
);

const textOutline = '2px contrast';

ren.rect(300, 0, 300, 400)
	.attr({
    	fill: 'black'
    })
    .add();
    
ren.text('White on white', 300, 150)
	.css({
    	fontSize: '0.8em',
        fontWeight: 'bold',
    	color: 'white',
        textOutline
    })
    .attr({
    	align: 'center'
    })
    .add();
        
ren.text('Black on black', 300, 250)
	.css({
    	fontSize: '0.8em',
        fontWeight: 'bold',
        color: 'black',
        textOutline
    })
    .attr({
    	align: 'center'
    })
    .add();