' Highcharts.seriesTypes.dumbbell.prototype.drawLegendSymbol = Highcharts.seriesTypes.line.prototype.drawLegendSymbol;
Highcharts.seriesTypes.column.prototype.drawLegendSymbol = Highcharts.seriesTypes.line.prototype.drawLegendSymbol;"
I have received this part of the source code. But when I put this part, I moved from tab 1 to tab 2, and the chart legend marker on tab 1. has been changed, is it possible to change this part so that it does not change?
tab3 sorce Code
Code: Select all
Highcharts.seriesTypes.dumbbell.prototype.drawLegendSymbol = Highcharts.seriesTypes.line.prototype.drawLegendSymbol;
Highcharts.seriesTypes.column.prototype.drawLegendSymbol = Highcharts.seriesTypes.line.prototype.drawLegendSymbol;
const valuationEquity = this.data.apiData.valuation.data.Equity,
valuationFixedIncome = this.data.apiData.valuation.data.FixedIncome;
const valuationEmEquityData = this.data.apiData.valuation.data.Equity['EM Equity'];
const valuationEuropeEquityData = this.data.apiData.valuation.data.Equity['Europe Equity'];
const valuationJapanEquityData = this.data.apiData.valuation.data.Equity['Japan Equity'];
const valuationUkEquityData = this.data.apiData.valuation.data.Equity['UK Equity'];
const valuationUsEquityData = this.data.apiData.valuation.data.Equity['US Equity'];
const valuationEmergyingFixedIncomeData = this.data.apiData.valuation.data.FixedIncome['Emergying Market Bond'];
const valuationEuropeanFixedIncomeData = this.data.apiData.valuation.data.FixedIncome['European High Yield'];
const valuationUsFixedIncomeData = this.data.apiData.valuation.data.FixedIncome['US High Yield'];
Highcharts.chart('boxPlotValuation', {
chart: {
type: 'column',
width: 1540,
height: 360,
events: {
render() {
const chart = this,
legend = chart.legend,
legendMargin = legend.options.margin ? legend.options.margin - legend.padding : 0,
startX = 0,
startY = legend.group.translateY + legend.legendHeight + legendMargin / 2,
endX = chart.chartWidth,
endY = startY;
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],
});
}
},
},
},
credits: { enabled: false }, // 하단 highchart.com 글씨 삭제
exporting: {
// 상단 context menu 제거
enabled: false,
},
title: {
text: '',
},
credits: {
enabled: false,
},
xAxis: {
lineColor: '#000000',
tickColor: '#000000',
categories: [
'U.S.<br>equities',
'Japan<br>equities',
' Europe<br>equities',
'UK<br>equities',
'EM<br>equities',
'U.S. high yield',
'European high<br/>Yield',
'Emerging<br/>market bonds',
],
labels: {
style: {
fontSize: '13px',
fontFamily: 'BLKFort-Book, AvenirNextRegular, Arial, Sans-Serif',
color: '#000000',
},
},
plotLines: [
{
color: '#000000',
width: 1,
value: 4.5,
zIndex: 50,
label: {
style: {
fontSize: '16px',
fontWeight: 'bold',
fontFamily: 'BLKFort-Book, AvenirNextRegular, Arial, Sans-Serif',
color: '#000000',
},
rotation: 0,
text: '',
verticalAlign: 'top',
textAlign: 'center',
y: -10,
x: -110,
},
},
],
},
yAxis: {
startOnTick: false,
gridLineColor: '#b3b3b3',
plotLines: [
{
color: '#000000',
width: 1,
value: 0,
zIndex: 1,
},
],
labels: {
format: '{value}%',
style: {
fontSize: '13px',
fontFamily: 'BLKFort-Book, AvenirNextRegular, Arial, Sans-Serif',
color: '#b3b3b3',
},
},
title: {
text: 'Expensive Cheaper',
style: {
fontSize: '13px',
color: '#b3b3b3',
},
},
},
legend: {
align: 'right',
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',
},
},
series: [
{
type: 'dumbbell',
name: '5th to 95th Percentile',
color: '#000000',
data: [
[valuationEmEquityData['5'], valuationEmEquityData['95']],
[valuationEuropeEquityData['5'], valuationEuropeEquityData['95']],
[valuationJapanEquityData['5'], valuationJapanEquityData['95']],
[valuationUkEquityData['5'], valuationUkEquityData['95']],
[valuationUsEquityData['5'], valuationUsEquityData['95']],
[valuationEmergyingFixedIncomeData['5'], valuationEmergyingFixedIncomeData['95']],
[valuationEuropeanFixedIncomeData['5'], valuationEuropeanFixedIncomeData['95']],
[valuationUsFixedIncomeData['5'], valuationUsFixedIncomeData['95']],
],
marker: {
enabled: false,
},
lineWidth: 2,
states: {
hover: {
lineWidth: 0,
},
},
enableMouseTracking: false,
},
{
data: [
Number(valuationEmEquityData['75'])-Number(valuationEmEquityData['25']),
Number(valuationEuropeEquityData['75'])-Number(valuationEuropeEquityData['25']),
Number(valuationJapanEquityData['75'])-Number(valuationJapanEquityData['25']),
Number(valuationUkEquityData['75'])-Number(valuationUkEquityData['25']),
Number(valuationUsEquityData['75'])-Number(valuationUsEquityData['25']),
Number(valuationEmergyingFixedIncomeData['75'])-Number(valuationEmergyingFixedIncomeData['25']),
Number(valuationEuropeanFixedIncomeData['75'])-Number(valuationEuropeanFixedIncomeData['25']),
Number(valuationUsFixedIncomeData['75'])-Number(valuationUsFixedIncomeData['25'])
],
color: 'rgb(255,230,127)',
borderColor: '#303030',
zIndex: 77,
pointWidth: 40,
marker: {
symbol: 'square',
},
showInLegend: false,
linkedTo: 'inter',
},
{
name: 'Interquartile range',
showInLegend: true,
type: 'scatter',
id: 'inter',
color: 'rgb(255,230,127)',
marker: {
radius: 10,
symbol: 'square',
},
},
{
name: 'Q1',
showInLegend: false,
enableMouseTracking: false,
data: [
valuationEmEquityData['25'],
valuationEuropeEquityData['25'],
valuationJapanEquityData['25'],
valuationUkEquityData['25'],
valuationUsEquityData['25'],
valuationEmergyingFixedIncomeData['25'],
valuationEuropeanFixedIncomeData['25'],
valuationUsFixedIncomeData['25']
],
color: 'rgba(100,100,100,0)',
},
{
name: 'Median',
type: 'spline',
lineWidth: 2,
lineColor: 'transparent',
states: {
hover: {
enabled: false,
lineWidth: 0,
},
},
color: 'rgb(0,139,92)',
showInLegend: false,
marker: {
lineColor: 'rgb(0,139,92)',
lineWidth: 3,
radius: 9,
symbol: 'dash',
},
zIndex: 88,
data: [
valuationEmEquityData['50'],
valuationEuropeEquityData['50'],
valuationJapanEquityData['50'],
valuationUkEquityData['50'],
valuationUsEquityData['50'],
valuationEmergyingFixedIncomeData['50'],
valuationEuropeanFixedIncomeData['50'],
valuationUsFixedIncomeData['50']
],
linkedTo: 'median',
},
{
id: 'median',
color: 'rgb(0,139,92)',
name: 'Median',
showInLegend: true,
type: 'line',
marker: {
radius: 0,
},
},
{
name: 'Latest Quarter Average ',
type: 'spline',
showInLegend: true,
lineWidth: 0,
states: {
hover: {
enabled: false,
lineWidth: 0,
},
},
marker: {
radius: 6,
symbol: 'circle',
},
color: '#ff754b',
zIndex: 99,
data: [
valuationEmEquityData['latest'],
valuationEuropeEquityData['latest'],
valuationJapanEquityData['latest'],
valuationUkEquityData['latest'],
valuationUsEquityData['latest'],
valuationEmergyingFixedIncomeData['latest'],
valuationEuropeanFixedIncomeData['latest'],
valuationUsFixedIncomeData['latest']
],
},
],
});
tab1 sorce Code
Code: Select all
Highcharts.chart('boxPlotFirst', {
chart: {
type: 'column',
height: 300,
events: {
render() {
const chart = this,
legend = chart.legend,
legendMargin = legend.options.margin ? legend.options.margin - legend.padding : 0,
startX = 0,
startY = legend.group.translateY + legend.legendHeight + legendMargin / 2,
endX = chart.chartWidth,
endY = startY;
if (!chart.customLine) {
chart.customLine = chart.renderer
.path(['M', startX, startY, 'L', endX, endY])
.attr({
'stroke-width': 2,
stroke: 'black',
})
.add();
} else {
chart.customLine.attr({
d: ['M', startX, startY, 'L', endX, endY],
});
}
},
},
},
credits: {
enabled: false,
},
exporting: {
enabled: false,
},
title: {
text: '',
},
xAxis: [
{
width: '40%',
offset: 0,
lineColor: '#000000',
tickColor: '#000000',
categories: ['VIX'],
labels: {
autoRotation: false,
overflow: 'allow',
style: {
fontSize: '13px',
color: '#000',
},
},
},
{
width: '40%',
left: '60%',
offset: 0,
lineColor: '#000000',
tickColor: '#000000',
categories: ['MOVE'],
labels: {
autoRotation: false,
overflow: 'allow',
style: {
fontSize: '13px',
color: '#000',
},
},
},
],
yAxis: [
{
width: '40%',
offset: 0,
gridLineColor: '#b3b3b3',
min: 0,
labels: {
style: {
fontSize: '13px',
color: '#b3b3b3',
},
},
title: {
text: 'VIX index',
style: {
fontSize: '13px',
fontWeight: 'bold',
color: '#000',
},
},
},
{
width: '40%',
left: '60%',
offset: 0,
gridLineColor: '#b3b3b3',
min: 10,
labels: {
style: {
fontSize: '13px',
color: '#b3b3b3',
},
format: '{value}%',
},
title: {
text: 'MOVE index',
style: {
fontSize: '13px',
fontWeight: 'bold',
color: '#000',
},
},
},
],
legend: {
align: 'center',
verticalAlign: 'top',
enabled: true,
margin: 40,
itemStyle: {
fontSize: '13px',
fontWeight: 'normal',
fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
color: '#000000',
},
symbolHeight: 11,
symbolWidth: 11,
symbolRadius: 0,
},
tooltip: {
useHTML: true,
shared: false,
valueDecimals: 2,
},
plotOptions: {
column: {
stacking: 'normal',
grouping: false,
},
},
series: [
{
xAxis: 1,
yAxis: 1,
linkedTo: 'test',
type: 'line',
name: '5th to 95th Percentile',
color: '#000000',
data: [
[0, this.data.boxPlot.boxPlot5.moveIndex],
[0, this.data.boxPlot.boxPlot95.moveIndex],
],
marker: {
enabled: false,
},
states: {
hover: {
lineWidth: 0,
},
},
enableMouseTracking: false,
},
{
xAxis: 1,
yAxis: 1,
linkedTo: 'range',
name: 'Interquartile range',
data: [this.data.boxPlot.boxPlotRange.moveIndex],
color: '#ffd600',
borderColor: '#000000',
zIndex: 77,
pointWidth: 40,
},
{
xAxis: 1,
yAxis: 1,
name: 'Q1',
showInLegend: false,
data: [this.data.boxPlot.boxPlot25.moveIndex],
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: [this.data.boxPlot.boxPlot50.moveIndex],
},
{
xAxis: 1,
yAxis: 1,
linkedTo: 'latest',
name: 'Latest',
type: 'spline',
marker: {
radius: 6,
symbol: 'circle',
},
color: '#ff754b',
zIndex: 99,
data: [this.data.boxPlot.boxPlotLatest.moveIndex],
},
{
xAxis: 0,
yAxis: 0,
id: 'test',
type: 'line',
name: '5th to 95th Percentile',
color: '#000000',
data: [
[0, this.data.boxPlot.boxPlot5.vixIndex],
[0, this.data.boxPlot.boxPlot95.vixIndex],
],
marker: {
enabled: false,
},
states: {
hover: {
lineWidth: 0,
},
},
enableMouseTracking: false,
},
{
xAxis: 0,
yAxis: 0,
id: 'range',
name: 'Interquartile range',
data: [this.data.boxPlot.boxPlotRange.vixIndex],
borderColor: '#000000',
color: '#ffd600',
zIndex: 77,
pointWidth: 40,
},
{
xAxis: 0,
yAxis: 0,
name: 'Q1',
showInLegend: false,
data: [this.data.boxPlot.boxPlot25.vixIndex],
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: [this.data.boxPlot.boxPlot50.vixIndex],
},
{
xAxis: 0,
yAxis: 0,
id: 'latest',
name: 'Latest',
type: 'spline',
marker: {
radius: 6,
symbol: 'circle',
},
color: '#ff754b',
zIndex: 99,
data: [this.data.boxPlot.boxPlotLatest.vixIndex],
},
],
});
// 세번째
Highcharts.seriesTypes.line.prototype.drawLegendSymbol = Highcharts.seriesTypes.column.prototype.drawLegendSymbol;
console.log(Highcharts);
Highcharts.chart('dataChart', {
credits: { enabled: false }, // 하단 highchart.com 글씨 삭제
navigator: {
enabled: false,
},
scrollbar: {
enabled: false,
},
chart: {
zoomType: 'x',
height: 300,
events: {
render() {
const chart = this,
legend = chart.legend,
legendMargin = legend.options.margin ? legend.options.margin - legend.padding : 0,
startX = 0,
startY = legend.group.translateY + legend.legendHeight + legendMargin / 2,
endX = chart.chartWidth,
endY = startY;
if (!chart.customLine) {
chart.customLine = chart.renderer
.path(['M', startX, startY, 'L', endX, endY])
.attr({
'stroke-width': 2,
stroke: 'black',
})
.add();
} else {
chart.customLine.attr({
d: ['M', startX, startY, 'L', endX, endY],
});
}
},
},
},
title: {
text: '',
},
tooltip: {
split: false,
shared: false,
xDateFormat: '%b.%d, %Y ',
valueDecimals: 2,
},
xAxis: {
type: 'datetime',
tickmarkPlacement: 'on',
labels: {
overflow: 'allow',
tickInterval: 24 * 60 * 60 * 1000 * 20,
style: {
fontSize: '13px',
color: '#000000',
},
formatter: function () {
return Highcharts.dateFormat('%b, %Y', Number(this.value));
},
},
title: {
text: null,
},
},
yAxis: {
title: {
text: 'VIX Index',
style: {
fontSize: '13px',
color: '#000000',
},
},
},
legend: {
align: 'right',
verticalAlign: 'top',
enabled: true,
margin: 40,
itemStyle: {
fontSize: '13px',
fontWeight: 'normal',
fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
color: '#000000',
},
},
plotOptions: {
series: {
marker: {
enabled: false,
},
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')],
],
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1,
},
},
},
},
series: [
{
name: 'VIX',
color: '#ffd600',
data: this.data.dataChart.vixValue,
},
{
name: 'MOVE',
color: '#ff754b',
data: this.data.dataChart.moveValue,
},
],
});
this.data.dataChart.moveValue = [];
this.data.dataChart.vixValue = [];