kdp9390
Posts: 62
Joined: Tue Apr 26, 2022 3:20 am

add chart line

I want to draw a red line as shown in the picture. Is it possible?

Code: Select all

Highcharts.chart('boxPlotFirst', {
  chart: {
    type: 'column',
    width: 600,
    height: 400,
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  title: {
        text: '',
    },
  xAxis: [{
		width: '40%',
		left: '60%',
		offset: 0,
    lineColor: '#000000',
    tickColor: '#000000',
    categories: ['VIX'],
    labels: {
      autoRotation: false,
      overflow: 'allow',
      style: {
        fontSize: '13px',
        color: '#000000',
      },
    }
  }, {
		width: '40%',
		offset: 0,
		lineColor: '#000000',
    tickColor: '#000000',
    categories: ['MOVE'],
    labels: {
      autoRotation: false,
      overflow: 'allow',
      style: {
        fontSize: '13px',
        color: '#000000',
      },
    }
	}],
  yAxis: [{
		width: '40%',
		left: '60%',
		offset: 0,
    gridLineColor: '#000000',
    min: 0,
    labels: {
      style: {
        fontSize: '13px',
        color: '#000000',
      },
    },
    title: {
      text: 'VIX index',
      style: {
        fontSize: '13px',
        color: '#000000',
      },
    }
  }, {
		width: '40%',
		offset: 0,
		gridLineColor: '#000000',
		    min: 10,
		    labels: {
		      style: {
		        fontSize: '13px',
		        color: '#000000',
		      },
		      format: '{value}%'
		    },
    title: {
      text: 'MOVE index',
      style: {
        fontSize: '13px',
        color: '#000000',
      },
    }
	}],
  legend: {
    align: 'center',
		verticalAlign: 'top',
    enabled: true,
    margin: 40,
    itemStyle: {
      fontSize: '13px',
      fontWeight: 'normal',
      fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
      color: '#000000',
    },
  },
  tooltip: {
    useHTML: true,
    shared: true
  },
  plotOptions: {
    column: {
      stacking: 'normal',
			grouping: false
    },
  },
  series: [{
		xAxis: 0,
		yAxis: 0,
		id: 'test',
    type: 'line',
    name: '5th to 95th Percentile',
    color: '#000000',
    data: [
      [0, 10],
      [0, 75]
    ],
    marker: {
      enabled: false
    },
    states: {
      hover: {
        lineWidth: 0
      }
    },
    enableMouseTracking: false
  }, {
		xAxis: 0,
		yAxis: 0,
		id: 'range',
    name: 'Interquartile range',
    data: [25],
    color: 'rgb(255,230,127)',
    borderColor: '#303030',
    zIndex: 77,
    pointWidth: 40
  }, {
		xAxis: 0,
		yAxis: 0,
    name: 'Q1',
		showInLegend: false,
    data: [25],
    color: 'rgba(100,100,100,0)',
  }, {
		
		xAxis: 0,
		yAxis: 0,
		id: 'Median',
    name: 'Median',
    type: 'spline',
    color: 'rgb(0,139,92)',
    lineWidth: 2,
    marker: {
      lineColor: 'rgb(0,139,92)',
      lineWidth: 2,
      radius: 9,
      symbol: 'dash'
    },
    zIndex: 88,
    data: [41]
  }, {
		xAxis: 0,
		yAxis: 0,
		id: 'latest',
    name: 'Latest',
    type: 'spline',
    marker: {
      radius: 6,
      symbol: 'circle'
    },
    color: '#ff754b',
    zIndex: 99,
    data: [36]
  },
	// second chart
	{
		xAxis: 1,
		yAxis: 1,
		linkedTo: 'test',
    type: 'line',
    name: 'test',
    color: '#000000',
    data: [
      [0, 10],
      [0, 75]
    ],
    marker: {
      enabled: false
    },
    states: {
      hover: {
        lineWidth: 0
      }
    },
    enableMouseTracking: false
  }, {
		xAxis: 1,
		yAxis: 1,
		linkedTo: 'range',
    name: 'Interquartile range',
    data: [25],
    color: 'rgb(255,230,127)',
    borderColor: '#303030',
    zIndex: 77,
    pointWidth: 40
  }, {
		xAxis: 1,
		yAxis: 1,
    name: 'Q1',
    showInLegend: false,
    data: [25],
    color: 'rgba(100,100,100,0)',
  }, {
		xAxis: 1,
		yAxis: 1,
		linkedTo: 'median',
		name: 'Median',
    type: 'spline',
    color: 'rgb(0,139,92)',
    lineWidth: 2,
    marker: {
      lineColor: 'rgb(0,139,92)',
      lineWidth: 2,
      radius: 9,
      symbol: 'dash'
    },
    zIndex: 88,
    data: [41]
  }, {
		xAxis: 1,
		yAxis: 1,
		linkedTo: 'latest',
    name: 'Latest',
    type: 'spline',
    marker: {
      radius: 6,
      symbol: 'circle'
    },
    color: '#ff754b',
    zIndex: 99,
    data: [36]
  }]
});
화면 캡처 2022-05-20 093503.png
화면 캡처 2022-05-20 093503.png (12.87 KiB) Viewed 263 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: add chart line

Hi,

Of course, it is possible to draw a line between your chart and a legend. You can achieve it with our Highcharts SVGRenderer.

I have added a margin of 50px to your legend, just to make everything more clear.

Please take a look at the demo example and API references below.

Demo: https://jsfiddle.net/BlackLabel/ehLn3zmj/
API: https://api.highcharts.com/class-refere ... VGRenderer
https://api.highcharts.com/highcharts/legend.margin

Do not hesitate to contact us with any further questions!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”