Chart Bubble III
Chart Bubble III
View Demo

Insert it in <head>

<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />

<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>

Use Components

<body class="theme-light">

<div id="chart"></div>

<script type="text/javascript">
    $(function () {
        $("#chart").devuiChart({
            theme: "light",
            axisX: {
                title: {
                    text: "Pressure psi"
                },
                endOffset: 0.05,
                startOffset: 0.05,
                axisTickText: {
                    format: "{text} Psi"
                }
            },
            axisY: {
                title: {
                    text: "Boiling point in Celsius"
                },
                axisTickText: {
                    format: "<b>{text} Celsius</b>"
                }
            },
            primaryHeader: {
                text: "Water - pressure and boiling point"
            },
            tooltipSettings: {
                customHeaderText: 'Current Point:',
                customPointText: function (point, chart) {
                    return shield.format(
                        '<span style="color:{color}">Pressure: <b>{point.x}</b><br/>Boiling temperature:<b>{point.y}</b></span>',
                        {
                            point: point,
                            color: point.y > 87 ? 'red' : 'green'
                        }
                    );
                }
            },
            chartLegend: {
                align: "center",
                verticalAlign: "top",
                renderDirection: "horizontal"
            },
            dataSeries: [{
                seriesType: "bubble",
                collectionAlias: "metrics",
                data: [
                     {
                         x: 3.45,
                         y: 26.4,
                         size: 26.4
                     },
                     {
                         x: 20.69,
                         y: 60.8,
                         size: 60.8
                     },
                     {
                         x: 60.02,
                         y: 86.8,
                         size: 86.8
                     },
                     {
                         x: 101.3,
                         y: 100,
                         size: 100
                     },
                     {
                         x: 151.7,
                         y: 112,
                         size: 112
                     }
                ]
            }]
        });
    });
</script>

</body>