I’d like to insert a peity
graphic inside typed.js
but it doesn’t work the way I’ve done it. My code:
let typed = new Typed('#typedintro1', {
strings: ['<h3 class="h1intromodal1">Product with<b style="color: #dd4b39;"> low contribution </b>margin.</h3>',
'<div><span id="peityDropStatus1">12, 50, 38</span> The contribution is very large. Please</div>',
'<h3 class="h1intromodal1"><b style="color: #56cc66;">Effortlessly</b>...</h3>'],
loop: true,
typeSpeed: 25,
backSpeed: 15,
startDelay: 1,
backDelay: 1
});
$(function() {
$('#peityDropStatus1').peity('donut', {
fill: ['purple', 'yellow', 'green'],
width: 40,
height: 45,
innerRadius: 12
});
})
<head>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/jquery.peity.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]'></script>
</head>
<body>
<div id='typedintro1' style='position: relative; top: 12px;'></div>
</body>
Note that the graph doesn’t appear, only the numbers inside the span tag.