Marker on Xaxis
No gap in label and line x is set
by amrutaJgtp
HTML
<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>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
CSS
.highcharts-figure,
#container {
height: 400px;
}
JavaScript
Highcharts.chart("container", {
tooltip: {
enabled: true,
},
legend: {
enabled: true,
},
yAxis: [
{
title: {
text: "Sales",
align: "middle",
margin: 5,
},
opposite: false,
axisInternalName: "0",
labels: {
enabled: true,
align: "center",
},
plotLines: [
{
value: 5000,
zIndex: 5,
dashStyle: "Solid",
width: 1,
color: "rgba(178,34,34,1)",
label: {
align: "right",
verticalAlign: "bottom",
text: "Y Marker",
style: {
color: "#000000",
fontSize: "1.0rem",
fontFamily: "Open Sans",
},
rotation: 360,
},
},
]
}
],
xAxis: {
title: {
text: "Geomaps By City",
align: "middle",
margin: 5,
},
labels: {
enabled: true,
},
id: "xAxis0",
categories: [
"Algeria",
"USA",
"China",
"Canada",
"India",
"Australia",
"UK",
"Argentina",
"Brazil",
"Iceland",
"The Bahamas",
]
},
series: [
{
zIndex: 1,
type: "column",
yAxis: 0,
data: [
{
y: 9031,
},
{
y: 8694,
},
{
y: 7227,
},
{
y: 6186,
},
{
y: 6058,
},
{
y: 5260,
},
{
y: 5041,
},
{
y: 3659,
},
{
y: 3460,
},
{
y: 3137,
},
{
y: 2856,
},
],
name: "Sales",
showInLegend: true,
dataLabels: {
enabled: false,
},
id: "series0",
},
{
type: "line",
dashStyle: "Solid",
marker: {
enabled: false,
},
data: [],
name: "L1 legend",
color: "rgba(178,34,34,1)"
...