Create button in 'SPLINE' chart baseline and legend part

[Tae June Park]

If you reduce the chart in 'SPLINE' chart, the baseline does not decrease with it, and the x,y baseline goes out of the chart. Any solution? And I want to place the button in the legend part like the picture below. Is it possible to create a button in the legend position?

HTML

Code: Select all

<div id="spline"></div>

Highlight events:
<button id='btn1'>OFF</button>

SCRIPT

Code: Select all

const getData = (min, max, count, year) => {
  let arr = [];
  for (let i = 0; i < count; i++) {
    arr.push({
      x: new Date(year, i, 0).getTime(),
      y: Math.floor(Math.random() * (max - min) + min)
    })
  }
  return arr;
}

Highcharts.chart('spline', {
  chart: {
    type: 'spline',
    width: 1000,
    height: 900,
    events: {
      load: function() {
        const chart = this,
          offset = 75,
          topMargin = 50;
        console.log(chart);
        chart.renderer.text('More +', chart.chartWidth - offset, chart.chartHeight + topMargin - offset).css({
          color: 'orange'
        }).add();
        chart.renderer.text('- Less', offset, chart.chartHeight + topMargin - offset).attr({
          rotation: -90
        }).css({
          color: 'orange',
        }).add();
        chart.renderer.text('- Less', offset, chart.chartHeight + topMargin - offset).css({
          color: 'green',
        }).add();
        chart.renderer.text('More +', offset, offset + topMargin).attr({
          rotation: -90
        }).css({
          color: 'green',
        }).add();

        const startX = 0,
          startY = 75,
          endX = chart.chartWidth,
          endY = startY,
          yAxisZero = chart.yAxis[0].translate(0);

        if (!chart.customLine) {
          chart.customLine = chart.renderer.path(['M', startX, startY, 'L', endX, endY]).attr({
            'stroke-width': 1,
            stroke: 'black',
          }).add();
        } else {
          chart.customLine.attr({
            d: ['M', startX, startY, 'L', endX, endY]
          });
        }

        btn1.addEventListener('click', (e) => {
          chart.series.find(series => series.userOptions.type === 'scatter').setVisible();
          e.target.innerHTML = e.target.innerHTML === 'OFF' ? 'ON' : 'OFF';
        });
      }
    }
  },
  credits: {
    enabled: false
  }, // 하단 highchart.com 글씨 삭제
  exporting: { // 상단 context menu 제거
    enabled: false
  },
  title: {
    text: '',
  },
  legend: {
    enabled: true,
    symbolPadding: 0,
    symbolWidth: 0,
    symbolHeight: 0,
    squareSymbol: false,
    align: 'right',
    verticalAlign: 'top'
  },
  plotOptions: {
    spline: {
      marker: {
        enabled: false
      },
      events: {
        legendItemClick: function() {
          const chart = this.chart;
          chart.series.find(series => series.name === 'Clear all').setVisible(true);
          if (this.name === 'Clear all') {
            chart.series.forEach(series => series.setVisible(true));
          }
        }
      }
    },
    scatter: {
      dataLabels: {
        enabled: true,
        y: -5,
        formatter: function() {
          return this.key;
        }
      }
    }
  },
  xAxis: {
    type: 'datetime',
    gridLineWidth: 0,
    /* min: -10,
    max: 10, */
    lineWidth: 1,
    lineColor: 'black',
    offset: -350,
    labels: {
      enabled: false
    },
    title: {
      text: 'Asset correlation',
      y: 350,
      x: -10,
      style: {
        fontSize: '13px',
      }
    }
  },
  yAxis: {
    gridLineWidth: 0,
    min: -10,
    max: 10,
    lineWidth: 1,
    lineColor: 'black',
    offset: -475,
    labels: {
      enabled: false
    },
    title: {
      text: 'Risk sentiment',
      x: -470,
      y: 10,
      style: {
        fontSize: '13px',
      }
    }
  },
  series: [{
    name: '2013',
    data: getData(-10, 10, 12, 2013),
    visible: false
  }, {
    name: '2014',
    data: getData(-10, 10, 12, 2014),
    visible: false
  }, {
    name: '2015',
    data: getData(-10, 10, 12, 2015),
    visible: false
  }, {
    name: '2016',
    data: getData(-10, 10, 12, 2016),
    visible: false
  }, {
    name: '2017',
    data: getData(-10, 10, 12, 2017),
    visible: false
  }, {
    name: '2018',
    data: getData(-10, 10, 12, 2018),
    visible: false
  }, {
    name: '2019',
    data: getData(-10, 10, 12, 2019),
    visible: false
  }, {
    name: '2020',
    data: getData(-10, 10, 12, 2020),
    visible: false
  }, {
    name: '2021',
    data: getData(-10, 10, 12, 2021)
  }, {
    name: '2022',
    data: getData(-10, 10, 12, 2022)
  }, {
    name: 'Clear all',
    data: [],
  }, {
    name: 'Test',
    type: 'scatter',
    showInLegend: false,
    data: [{
      x: new Date(2018, 4, 0).getTime(),
      y: 5,
      name: 'Test 1'
    }, {
      x: new Date(2016, 4, 0).getTime(),
      y: -2,
      name: 'Test 2'
    }],
    color: 'transparent',
    marker: {
      symbol: 'circle',
      radius: 8,
      color: 'transparent',
      lineColor: 'red',
      lineWidth: 3
    },
  }]
});

[hubert.k]

Hello Tae June Park!
Thanks for contacting us with your question!

I am not quite sure, what you mean by "the baseline does not decrease with it". I changed the chart width and height to control them with variables and now axes are also controlled by these variables. To set a button in a proper place you can use CSS. Check it in the demo below.

Demo: https://jsfiddle.net/BlackLabel/qe5w6pc0/

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