Question 52446 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to stretch multiple lines to x axis in highcharts? – Javascript

I am trying to show multiple lines in highcharts.

So I was able to the multiple lines like the first chart. But it doesn’t make sense to me.

What is ideal is that all of the lines should be stretched to the x-axis like in the second chart.

X axis is a value of date as a number like 1660847299055.

I have the following option for the first chart.

      const option = {
        xAxis: {
          visible: false,
        },

        yAxis: {
          reversed: true,
          title: {
            text: 'Deviation',
          },
          startOnTick: false,
          endOnTick: false,
          min: 0,
          softMax: 15,
        },
      }

enter image description here

As the second chart said, I don’t care about the relations of x values between those three red, green, and blue lines. They should be stretched from start to end.

How can I implement this?

Tags:

2

Answers


  1. 0

    Using the chart handle you got after creating the chart you need to add a series for each line

     chart.addSeries({

            name: 'series name',
            type: 'line',
            data: [11,2,33,4,55,6,77,8]
          
        });

    https://api.highcharts.com/class-reference/Highcharts.Chart.html#addSeries

    Also chart has a member called chart.series for each line. You can play with this in the browser’s debugging tool console window to understand whats going on. You can iterate over that array to interact with the data and modify or add to it.

    enter image description here

    Check out xData and yData data has X and Y components. so adding data can be of the from value only [10,20,30,40] or timeseries [[2020,10],[2021,20],[2022,30] ..] x is year y is value.

    To change the data completely you need to find which line and use setData

    for(let s of chart.series){
    if ( s.name == "series name"){
        let data = [NEW DATA];
        s.setData(data);
        
    }
    s.update()
}
//chart.redraw()

    I would recommend reading this page from highcharts about series data and experimenting with it in the browsers Inspector window.

    Login or Signup to reply.
  2. 0

    A possible solution based on the multiple x-axes idea (still don’t know if it fits the OP’s data format). The idea is to provide each series with its own x axis which will automatically adapt to the min and max of the data in that series. This works since none of the x axes are intended to be displayed.

    const data1 = [[1262304000000,0.7537],[1262563200000,0.6951],[1262649600000,0.6925],[1262736000000,0.697],[1262822400000,0.6992],[1262908800000,0.7007],[1263168000000,0.6884],[1263254400000,0.6907],[1263340800000,0.6868],[1263427200000,0.6904],[1263513600000,0.6958],[1263772800000,0.696],[1263859200000,0.7004],[1263945600000,0.7077],[1264032000000,0.7111],[1264118400000,0.7076],[1264377600000,0.7068],[1264464000000,0.7101],[1264550400000,0.7107],[1264636800000,0.7144],[1264723200000,0.7161]];
const data2 = [[1262649600000,0.625],[1262736000000,0.607],[1262908800000,0.62007],[1263254400000,0.64907]];
const data3 = [[1263427200000,0.6404],[1263513600000,0.6158],[1263772800000,0.636],[1263945600000,0.6077]];

new Highcharts.Chart({
    chart: { renderTo: "chart1" },
    title: { text: "True x" },
    series: [
        {
            data: data1
        },
        {
            data:data2
        },
        {
            data: data3
        },
    ],
    xAxis: { type: "datetime", visible: false},
});

new Highcharts.Chart({
    chart: { renderTo: "chart2" },
    title: { text: "Streched" },
    series: [
        {
            data: data1,
            xAxis: 0
        },
        {
            data:data2,
            xAxis: 1
        },
        {
            data: data3,
            xAxis: 2
        },
    ],
    xAxis: [
        { type: "datetime", visible: false},
        { type: "datetime", visible: false},
        { type: "datetime", visible: false},
    ]
});
    <div id="chart1" style="display:inline-block;height:90vh; width: 45vw"></div>
<div id="chart2" style="display:inline-block;height:90vh; width: 45vw"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.2/highcharts.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search