HighCharts - Scatter Chart

Hello, this article is about how we can create a Scatter chart using Highcharts in js. Scatter charts are often used to visualize the relationships between data in two dimensions.

CDN for using Scatter chart

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Create a HTML file i.e, ScatterChart.html and use below code.

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-Brahmadescription">
        Scatter chart created by Brahma Prakash Shukla
    </p>
</figure>

Now, create a CSS file for styling the Scatterchart.

#container {
    max-width: 900px;
    height: 700px;
    margin: auto;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 460px;
    max-width: 900px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: blue;
}

After that, create a JS file for showing data in Scatter chart.

Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'Created By Brahma Prakash Shukla'
    },
    subtitle: {
        useHTML: true,
        text: 'Scatter Chart'
    },
    yAxis: {
        title: {
            text: 'EXAMPLE'
        }
    },
    xAxis: {
        title: {
            text: 'Y'
        }
    },

    tooltip: {
        useHTML: true,
        headerFormat: null,
        pointFormat: '<b>Country</b>: {point.name}<br><b>X</b>: {point.x} $<br/><b>Y</b>: {point.y}'

    },
    legend: {
        enabled: true
    },


    series: [{
        type: 'line',
        name: 'Y',
        color: "#b6c1ff",
        data: [
            [750.5, 4.89E+00],
            [119749.43, 8.13E+00]
        ],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 0
            }
        },
        enableMouseTracking: false
    }, {
        keys: ['x', 'y', 'name'],
        color: "#FFB6C1",
        name: "X",
        data: [
            [1747.98, 3.98, 'Afghanistan'],
            [11024.92, 4.61, 'Albania'],
            [19101.3, 6.7, 'Argentina'],
            [8180.05, 4.35, 'Armenia'],
            [43832.43, 7.31, 'Australia'],
            [44074.95, 7.08, 'Austria'],
            [16698.86, 5.15, 'Azerbaijan'],
            [44456.22, 6.01, 'Bahrain'],
            [3132.57, 4.63, 'Bangladesh'],
            [17229.55, 5.72, 'Belarus'],
            [41723.12, 6.9, 'Belgium'],
            [1987.17, 3.62, 'Benin'],
            [7735.63, 5.08, 'Bhutan'],
            [6531.52, 5.83, 'Bolivia'],
            [10902.12, 5.12, 'Bosnia and Herzegovina'],
            [15356.46, 3.76, 'Botswana'],
            [14666.02, 6.55, 'Brazil'],
            [17000.07, 4.87, 'Bulgaria'],
            [1550.85, 4.42, 'Burkina Faso'],
            [3290.95, 4.16, 'Cambodia'],
            [2991.19, 5.04, 'Cameroon'],
            [42983.1, 7.41, 'Canada'],
            [2047.64, 4.32, 'Chad'],
            [22536.62, 6.53, 'Chile'],
            [13569.89, 5.3, 'China'],
            [12985.38, 6.39, 'Colombia'],
            [5542.89, 4.69, 'Congo'],
            [14914.21, 6.85, 'Costa Rica'],
            [20635.98, 5.21, 'Croatia'],
            [30382.56, 5.44, 'Cyprus'],
            [30380.59, 6.61, 'Czech Republic'],
            [750.5, 3.9, 'Democratic Republic of Congo'],
            [45483.76, 7.51, 'Denmark'],
            [13371.52, 5.06, 'Dominican Republic'],
            [10776.57, 5.96, 'Ecuador'],
            [10095.61, 4.76, 'Egypt'],
            [7845.16, 6.02, 'El Salvador'],
            [27328.64, 5.63, 'Estonia'],
            [1533.11, 4.57, 'Ethiopia'],
            [38993.67, 7.45, 'Finland'],
            [37765.75, 6.36, 'France'],
            [16836.6, 4.66, 'Gabon'],
            [9025.13, 4.12, 'Georgia'],
            [43784.15, 7.04, 'Germany'],
            [3929.68, 3.99, 'Ghana'],
            [24094.79, 5.62, 'Greece'],
            [7292.72, 6.46, 'Guatemala'],
            [1184.04, 3.5, 'Guinea'],
            [1651.23, 3.57, 'Haiti'],
            [4311.18, 4.85, 'Honduras'],
            [24831.35, 5.34, 'Hungary'],
            [42674.42, 7.5, 'Iceland'],
            [5754.06, 4.34, 'India'],
            [10367.7, 5.04, 'Indonesia'],
            [16010.11, 4.75, 'Iran'],
            [14928.89, 4.49, 'Iraq'],
            [60944.02, 6.83, 'Ireland'],
            [31970.69, 7.08, 'Israel'],
            [34244.71, 5.85, 'Italy'],
            [3251.16, 4.45, 'Ivory Cost'],
            [37818.09, 5.88, 'Japan'],
            [8491.02, 5.4, 'Jordan'],
            [23522.29, 5.95, 'Kazakhstan'],
            [2835.64, 4.36, 'Kenya'],
            [9097.14, 5.08, 'Kosovo'],
            [69329.41, 6.15, 'Kuwait'],
            [3237.6, 4.91, 'Kyrgyzstan'],
            [23057.31, 5.88, 'Latvia'],
            [13087.37, 5.17, 'Lebanon'],
            [785.25, 2.7, 'Liberia'],
            [26970.81, 5.71, 'Lithuania'],
            [95311.11, 6.7, 'Luxembourg'],
            [12759.71, 4.98, 'Macedonia'],
            [1376.33, 3.59, 'Madagascar'],
            [1088.7, 3.87, 'Malawi'],
            [24988.83, 6.32, 'Malaysia'],
            [1919.23, 4.58, 'Mali'],
            [34380.06, 6.61, 'Malta'],
            [3601.61, 3.92, 'Mauritania'],
            [16667.84, 6.24, 'Mexico'],
            [4746.78, 6.02, 'Moldova'],
            [11409.42, 4.98, 'Mongolia'],
            [15291.48, 5.12, 'Montenegro'],
            [7285.66, 5.16, 'Morocco'],
            [1118.22, 4.55, 'Mozambique'],
            [5071.11, 4.22, 'Myanmar'],
            [2300.89, 4.81, 'Nepal'],
            [46353.85, 7.32, 'Netherlands'],
            [34646.31, 7.42, 'New Zealand'],
            [4960.91, 5.92, 'Nicaragua'],
            [897.49, 3.67, 'Niger'],
            [5670.64, 4.93, 'Nigeria'],
            [63669.53, 7.6, 'Norway'],
            [4694.86, 4.82, 'Pakistan'],
            [2654.41, 4.7, 'Palestine'],
            [20674.3, 6.61, 'Panama'],
            [8639.29, 5.56, 'Paraguay'],
            [11767.52, 5.58, 'Peru'],
            [6874.58, 5.55, 'Philippines'],
            [25299.05, 6.01, 'Poland'],
            [26548.33, 5.08, 'Portugal'],
            [119749.43, 6.37, 'Qatar'],
            [20537.88, 5.78, 'Romania'],
            [24124.33, 6, 'Russia'],
            [1715.89, 3.48, 'Rwanda'],
            [50723.71, 6.35, 'Saudi Arabia'],
            [2296.74, 4.62, 'Senegal'],
            [13277.71, 5.32, 'Serbia'],
            [1316.06, 4.91, 'Sierra Leone'],
            [80892.06, 6.62, 'Singapore'],
            [28254.26, 6.16, 'Slovakia'],
            [29097.34, 5.74, 'Slovenia'],
            [12425.34, 4.89, 'South Africa'],
            [34177.65, 5.78, 'South Korea'],
            [1808.16, 4.07, 'South Sudan'],
            [32215.97, 6.38, 'Spain'],
            [11061.84, 4.61, 'Sri Lanka'],
            [45488.29, 7.29, 'Sweden'],
            [56510.86, 7.57, 'Switzerland'],
            [2640.59, 5.12, 'Tajikistan'],
            [2490.96, 3.66, 'Tanzania'],
            [15236.71, 6.2, 'Thailand'],
            [1350.81, 3.77, 'Togo'],
            [10749.86, 5.13, 'Tunisia'],
            [23382.25, 5.51, 'Turkey'],
            [14992.32, 5.79, 'Turkmenistan'],
            [1692.53, 4.24, 'Uganda'],
            [7464.94, 3.96, 'Ukraine'],
            [65975.38, 6.57, 'United Arab Emirates'],
            [38509.21, 6.52, 'United Kingdom'],
            [52789.97, 6.86, 'United States'],
            [19831.45, 6.63, 'Uruguay'],
            [5700.24, 5.97, 'Uzbekistan'],
            [5667.41, 5.08, 'Vietnam'],
            [2641.05, 2.98, 'Yemen'],
            [3627.2, 4.84, 'Zambia'],
            [1890.78, 3.7, 'Zimbabwe']
        ]
    }]
});

Now, your chart will look like this,

HighCharts - Scatter Chart

Hopefully, this article helps you in creating a Scatter chart. In other articles, I will also explain different types of charts using highchart.

Thanks