JSFiddle - React, Tailwind, and code Playground

by franzo

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/draggable-points.js"></script>

<div id="drop">&nbsp;</div>
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    height: 500px;
}

JavaScript

Highcharts.chart('container', 

{"chart":{"type":"spline","className":"highcharts-palette-light","styledMode":false},"title":{"text":""},"xAxis":{"title":{"enabled":false},"tickInterval":1,"categories":["10%","25%","40%","50%","55%"]},"yAxis":{"title":{"text":"Preference value"},"labels":{"format":"{value}%"}},"legend":{"enabled":false},"plotOptions":{"series":{"cursor":"move","dataLabels":{"enabled":true,"format":"{point.y:.1f}"},"dragDrop":{"draggableX":false,"draggableY":false,"liveRedraw":true},"marker":{"radius":3},"point":{"events":{}}}},"series":[{"cursor":"move","name":"Effectiveness (probability of success)","data":[{"name":"10%","y":0,"categoryId":5365548,"dragDrop":{"draggableY":false}},{"name":"25%","y":6.1,"categoryId":5365549,"dragDrop":{"draggableY":true,"dragMinY":0.1,"dragMaxY":10.8}},{"name":"40%","y":10.9,"categoryId":5365550,"dragDrop":{"draggableY":false}},{"name":"50%","y":13.8,"categoryId":5365565,"dragDrop":{"draggableY":true,"dragMinY":11,"dragMaxY":15.200000000000001}},{"name":"55%","y":15.3,"categoryId":5365566,"dragDrop":{"draggableY":false}}],"tooltip":{"valueDecimals":1,"valueSuffix":"%"}}]}

);