How to add dotted lines between two interval of x-axis in hightcharts

Question

I am trying to add dotted lines between the intervals of the x-axis but couldn't able to find anything. Can anyone help?

How can I achieve it? I am using HighCharts with React.js. Is there any property to do this?

 import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
//import HighchartsReact from "./HighchartsReact.js";
import HighchartsReact from "highcharts-react-official";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.chart1 = React.createRef();
    this.chart2 = React.createRef();
    const maxQuantity = 700;
    var maxSet = 0;
    this.state = {
      chartOptions1: {
        title: {
          enabled: true,
          text: "Quantity of Standard calling plan - cloud user(s)"
        },
        tooltip: {
          enabled: true,
          useHTML: true,
          formatter: function () {
            if (maxSet !== 0) {
              maxSet += 1;
              return (
                "<div class='test-tooltip'>" +
                "<div class='text-bold'>Highest quantity :" +
                this.y +
                "</div>" +
                "<div class='text-regular'> Total:" +
                "<span class='text-bold'> $57.19 </span>" +
                "</div>" +
                "<div class='text-regular'> Set: 30 Nov 19 </div>" +
                "</div>"
              );
            } else {
              return null;
            }
          }
        },
        plotOptions: {
          series: {
            color: "#0064D2"
          },
          line: {
            dataLabels: {
              enabled: true,
              useHTML: true,
              y: -10,
              x: -4,
              formatter: function () {
                if (this.y === maxQuantity && maxSet === 0) {
                  maxSet += 1;
                  console.log(this);
                  return (
                    "<div class='test-tooltip'>" +
                    "<div class='text-bold'>Highest quantity :" +
                    this.y +
                    "</div>" +
                    "<div class='text-regular'> Total:" +
                    "<span class='text-bold'> $57.19 </span>" +
                    "</div>" +
                    "<div class='text-regular'> Set: 30 Nov 19 </div>" +
                    "</div>"
                  );
                }
              }
            }
          }
        },
        chart: {
          height: 400
        },
        legend: {
          enabled: false
        },
        xAxis: {
          title: {
            text: "Date"
          },
          tickInterval: 24 * 3600 * 1000 * 5,
          units: [["day", [1, 5]]],
          text: "Date",
          type: "datetime",
          crosshair: true,
          dashStyle: "dash",
          labels: {
            formatter: function () {
              return Highcharts.dateFormat("%e %b", this.value);
            }
          }
        },
        yAxis: {
          title: {
            text: "Quantity"
          }
        },
        series: [
          {
            pointStart: Date.UTC(2011, 10, 15),
            id: "someid",
            data: [
              [Date.UTC(2012, 10, 15), 400],
              [Date.UTC(2012, 10, 20), 400],
              [Date.UTC(2012, 10, 25), 400],
              [Date.UTC(2012, 10, 30), 400],
              [Date.UTC(2012, 10, 35), 700],
              [Date.UTC(2012, 10, 35), 600],
              [Date.UTC(2012, 10, 35), 650],
              [Date.UTC(2012, 10, 35), 400],
              [Date.UTC(2012, 10, 40), 700],
              [Date.UTC(2012, 10, 45), 700]
            ]
          }
        ]
        // series: [
        //   {
        //     id: 'someId',
        //     data: [1, 1, 3]
        //   }
        // ]
      },
      chartOptions2: {
        chart: {
          height: 400
        },
        plotOptions: {
          series: {
            events: {
              legendItemClick: (function (component) {
                return function () {
                  const chart = component.chart1.current.chart;
                  const series = chart.get(this.options.id);

                  if (series) {
                    if (this.visible) {
                      series.hide();
                    } else {
                      series.show();
                    }
                  }
                };
              })(this)
            }
          }
        },
        series: [
          {
            id: "someId",
            data: [1, 2, 3]
          }
        ]
      }
    };
  }

  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={this.state.chartOptions1}
          ref={this.chart1}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

This is what I have tried. I am able to achieve intervals but not the dotted lines in between. I have added picture as well how it looks like.

Answer 1

Thank you for the code! With it, it is much easier to find a solution and it seems that changing your tickInterval to one day and setting the yAxis.labels.step to 5 should meet your requirements.

Demo: https://jsfiddle.net/BlackLabel/4x1v726j/

  xAxis: {
    title: {
      text: "Date"
    },
    tickInterval: 24 * 3600 * 1000,
    units: [
      ["day", [1, 5]]
    ],
    text: "Date",
    type: "datetime",
    crosshair: true,
    dashStyle: "dash",
    labels: {
            step: 5,
      formatter: function() {
        return Highcharts.dateFormat("%e %b", this.value);
      }
    }
  },

API: https://api.highcharts.com/highcharts/xAxis.labels.step