Scatter plot with log axis

author(s): Øystein Moseng

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.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>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>

<h1>Scatter plot with log axis</h1>
<h2>Chart</h2>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Scatter plot chart with a logarithmic x-axis.
    </p>
</figure>
<h2>CSV data</h2>
<pre id="csv">
Frequency,Amplitude
20,59.6781
23,61.2463
26,60.0019
29,60.5303
35,60.7097
42,60.5718
50,61.0027
58,60.1477
67,60.7626
77,60.2047
88,60.6805
100,60.6543
113,60.1771
128,59.7403
144,61.0976
162,60.6223
182,60.4353
204,60.4132
228,59.471
254,59.8147
283,59.8324
315,59.6174
350,61.1996
388,61.2249
430,60.4271
476,60.4706
527,61.1682
583,60.8199
645,60.4167
713,60.221
788,60.4286
870,59.6894
960,61.16
1059,60.113
1168,60.7577
1288,59.7865
1420,60.4661
1565,60.0994
1725,60.3211
1901,59.971
2094,59.4077
2307,59.5042
2541,59.4779
2798,59.5896
3081,58.6297
3392,59.7545
3735,58.621
4112,59.3281
4527,58.9666
4983,58.9657
5485,58.6024
6037,58.6976
6644,57.9394
7312,59.0149
8047,58.4276
8855,57.5889
9744,57.7182
10722,56.3439
11798,57.1396
12981,55.8747
14282,55.9795
15714,55.6929
17289,55.1456
19021,53.5724
20926,53.2978
</pre>

CSS

body {
  font-family: Verdana, sans-serif;
  padding-left: 10px;
}

h2 {
  font-size: 1.3rem;
  margin-left: 10px;
  margin-bottom: 0;
  margin-top: 1.5rem;
}

pre {
  margin-left: 1rem;
  border: 1px solid #cde;
  max-width: 600px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 10px;
}

#container {
    height: 400px;
}

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

.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: #f1f7ff;
}


input[type="number"] {
	min-width: 50px;
}

JavaScript

var chart = Highcharts.chart('container', {
    chart: {
        type: 'scatter'
    },
    legend: {
    	enabled: false
    },
    title: {
        text: 'Frequency analysis of a sound'
    },
    data: {
        csv: document.getElementById('csv').innerHTML
    },
    tooltip: {
        headerFormat: '',
        pointFormat: '{point.x:,.f} Hz: <b>{point.y} dB</b>'
    },
    yAxis: {
    	title: {
        	text: 'Amplitude (dB)'
        },
        min: 40,
        max: 70
    },
    xAxis: {
    	title: {
        	text: 'Frequency (Hz)'
        },
        min: 20,
        max: 20000,
        type: 'logarithmic'
    }
});