Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

161
Views
Plotline to touch the yaxis

I am trying to get plot a chart like below using highcharts. line chart with plot lines my attempt was here jsfiddle (ignore the marker symbol) enter image description here

 Highcharts.chart("container", {
  chart: {
    spacing: [50, 30, 30, 30],
  },
  title: {
    text: "",
  },
  xAxis: {
    categories: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
    plotLines: [
      {
        value: 3,
        dashStyle: "dash",
        color: "red",
        label: {
          text: "Plot line",
          rotation: 0,
          y: -10,
        },
      },
    ],
  },

  yAxis: {
    lineWidth: 1,
    startOnTick: false,
  },

  series: [
    {
      data: [
        29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
        95.6, 54.4,
      ],
    },
    {
      name: "target",
      showInLegend: false,
      marker: {
        enabled: true,
        symbol: "triangle",
        fillColor: "red",
        height: 50,
        width: 50,
      },
      data: [null, null, null, 180],
    },
    {
      showInLegend: false,
      data: [180, 180, 180, 180],
      color: "red",
      dashStyle: "dash",
      lineWidth: 1,
      marker: {
        enabled: false,
      },
      enableMouseTracking: false,
      states: {
        inactive: {
          enabled: false,
        },
      },
      pointPlacement: "on",
    },
  ],
});

As you can see Plotline on the xAxis is fine, but on yAxis it should be only till the point and I was not able to do it with the plotlines and I added series with multiple points with mousetracking=false. Issue is I am not able the get that series line to start at yAxis (part highlighted in rectangle). Any help is appreciated.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You can add a next dummy point with defined x position:

data: [{
  x: -1,
  y: 180
}, 180, 180, 180, 180],

and set the xAxis.min as 0.

Demo: https://jsfiddle.net/BlackLabel/2kvsgfd4/

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!