Can't moving x-range below x-axis

[Tjazz82]

Hi everyone

I have a chart with lines, plines and an x-range horizontal, this x-range have to be below my x-axis.

I have tried many methods but no one seems to work, I understand that I can't access to it with pure CSS

There is a way to accomplish this ?

I'm on a Vue application

This is my code:

X-range is in the last serie

Thanks for your help !

Code: Select all

productionChartOptions: any = {
    chart: {
      marginTop: 70,
    },
    legend: {
      useHTML: true,
      x: 0,
      y: 0,
    },
    xAxis: [
      {
        type: "datetime",
        visible: true,
        offset: 50,
      },
      {
        type: "datetime",
        visible: false,
        linkedTo: 0,
      },
    ],
    yAxis: [
      {
        min: 0,
        startOnTick: false,
        endOnTick: false,
        maxPadding: 0,
        gridLineWidth: 0,
        opposite: true,
        lineWidth: 0,
        title: {
          text: null,
        },
        labels: {
          style: {
            color: "#2C2C2C",
            fontWeight: "lighter",
          },
        },
      },
      {
        oposite: false,
        visible: false,
      },
    ],

    series: [
      {
        xAxis: 0,
        type: "column",
        name: "Production",
        data: [],
        color: "#60C0FF",
        borderRadius: 9,
        tooltip: {
          valueSuffix: "MWh",
        },
      },
      {
        xAxis: 0,
        type: "spline",
        name: "Budget",
        data: [],
        color: "#666",
        lineWidth: 1,
        marker: {
          lineWidth: 2,
          lineColor: "#FFF",
          fillColor: "#7098A7",
          radius: 8,
        },
        tooltip: {
          valueSuffix: "MWh",
        },
      },
      {
        yAxis: 1,
        xAxis: 1,
        name: "PerformanceStateChange",
        type: "xrange",
        pointWidth: 20,
        borderRadius: 0,
        borderWidth: 0,
        showInLegend: false,
        enableMouseTracking: false,
        dataLabels: {
          align: "right",
          format: "{y} points",
        },
        className: "x-range-bla",
        // pointPlacement: "between",
      },
    ],
  };

[mateusz.b]

Hello Tjazz82,

Welcome to our forum and thanks for contacting us with your question!

X axis by default is positioned at the bottom of your plot. You can adjust its placement using top option and most likely it is what you want to use.
Here is a demo based on your shared code: https://jsfiddle.net/BlackLabel/802g6ukm/

Let me know if that was what you were looking for!
Regards!

[Tjazz82]

Thanks for your answer @mateusz.b !

My problem is that I can't set a value y on x-range, cause this graph is applied to many differents scales. I mean sometimes y-axis is 0 to 10, sometimes it's 0 to 10000.

So I would like to have my x-range at a fixed position.
Perfect solution could be to change the initial

Code: Select all

 transform: translate(20, 70)

to

Code: Select all

transform: translate(20, 100)

I found this in doc https://api.highcharts.com/class-refere ... SVGElement about translate but I'm not sure if it's relevant and how to apply this in my case...

[Tjazz82]

Anybody have an idea ?

[mateusz.b]

Tjazz82,

We work as a single support team across all support platforms. We usually answer questions within 24 hours. Please be patient and wait for your answer as we are doing our best to deliver it asap.

When it comes to the issue, it is possible to use translate to move x-range point, here is an example: https://jsfiddle.net/BlackLabel/x8h56pd7/
However, this option doesn't seem to work in your case because you want to move your point below X axis, which is beyond plot area, and points outside of plot area are not visible.

Could you explain what is the purpose of such point placement? If you want to use it simply as a some kind of shape drawn on your chart they probably you should use SVGrenderer tool.
Demo: https://jsfiddle.net/BlackLabel/91eg086b/
API reference: https://api.highcharts.com/class-refere ... VGRenderer

Regards!

[Tjazz82]

Thanks for your answers !

It seemes that the second solution is more accurate.

I neef to place an horizontal column about 4 differents status, occurs one after one in time. And this bar have to be under plot area...

[mateusz.b]

Thanks for explanation, I think SVG renderer would be the best choice. In case of any troubles with implementation feel free to ask any questions.

Regards!