Spline with symbols

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    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: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
  "chart": {
    "type": "line"
  },
  "title": {
    "text": "Probability of birth by this day"
  },
  "xAxis": {
    "type": "category",
    "crosshair": true,
    "title": {
      "text": "",
      "enabled": false
    },
    "categories": ["22 Nov", "23 Nov", "24 Nov", "25 Nov", "26 Nov", "27 Nov", "28 Nov", "29 Nov", "30 Nov", "1 Dec", "2 Dec", "3 Dec", "4 Dec", "5 Dec", "6 Dec", "7 Dec", "8 Dec", "9 Dec", "10 Dec", "11 Dec", "12 Dec", "13 Dec", "14 Dec", "15 Dec", "16 Dec", "17 Dec", "18 Dec", "19 Dec", "20 Dec"],
    "labels": {
      "rotation": 270
    }
  },
  "yAxis": {
    "max": 100,
    "title": {
      "enabled": false
    },
    "labels": {}
  },
  "legend": {
    "enabled": false
  },
  "tooltip": {
    "crosshairs": true,
    "shared": true,
    "useHTML": true,
    "headerFormat": "{point.key}<table>",
    "pointFormat": "<tr><td style=\"color: {series.color}\">{series.name}: </td><td style=\"text-align: right\"><b>{point.y}</b></td></tr>",
    "footerFormat": "</table>"
  },
  "plotOptions": {
    "line": {
      "dataLabels": {
        "enabled": false
      },
      "marker": {
        "radius": 4,
        "lineColor": "#666666",
        "lineWidth": 1
      }
    }
  },
  "series": [{
    "name": "Percentage",
    "marker": {
      "enabled": true
    },
    "data": [10.831533477322, 12.095032397408, 13.520518358531, 15.410367170626, 17.850971922246, 19.913606911447, 22.570194384449, 25.626349892009, 28.434125269978, 31.371490280778, 35.215982721382, 39.254859611231, 43.282937365011, 47.894168466523, {
      "y": 54.805615550756,
      "marker": {
        "symbol": 'url(https://www.highcharts.com/samples/graphics/sun.png)',
        "width": 25,
        "height": 25,
        "enabled": true,
        "states": {
          "normal": {
            "opacity": 1
          }
        }
      }
    }, 60.043196544276, 64.524838012959, 68.77969762419, 72.753779697624, 76.82505399568, 81.047516198704, 85.097192224622,...