In Highchart, how to change all the legend symbols height in a multiple axes chart?
Use the following chart as an example.
https://jsfiddle.net/albertwang/rqekhf9s/1/
legend: {
symbolHeight: 20,
......
I want to change the height of both of these two legend symbols. However, I can only change the first one by using legend.symbolHeight.
Thank you for your help.
highcharts
asked Nov 12 '18 at 22:01
Albert WangAlbert Wang
33425
add a comment |
Use the following chart as an example.
https://jsfiddle.net/albertwang/rqekhf9s/1/
legend: {
symbolHeight: 20,
......
I want to change the height of both of these two legend symbols. However, I can only change the first one by using legend.symbolHeight.
Thank you for your help.
highcharts
asked Nov 12 '18 at 22:01
Albert WangAlbert Wang
33425
add a comment |
Use the following chart as an example.
https://jsfiddle.net/albertwang/rqekhf9s/1/
legend: {
symbolHeight: 20,
......
I want to change the height of both of these two legend symbols. However, I can only change the first one by using legend.symbolHeight.
Thank you for your help.
highcharts
asked Nov 12 '18 at 22:01
Albert WangAlbert Wang
33425
Use the following chart as an example.
https://jsfiddle.net/albertwang/rqekhf9s/1/
legend: {
symbolHeight: 20,
......
I want to change the height of both of these two legend symbols. However, I can only change the first one by using legend.symbolHeight.
Thank you for your help.
highcharts
highcharts
asked Nov 12 '18 at 22:01
Albert WangAlbert Wang
33425
asked Nov 12 '18 at 22:01
Albert WangAlbert Wang
33425
asked Nov 12 '18 at 22:01
Albert WangAlbert Wang
33425
asked Nov 12 '18 at 22:01
Albert WangAlbert Wang
33425
asked Nov 12 '18 at 22:01
Albert WangAlbert Wang
33425
33425
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You cannot change the legend size of the spline series, because highcharts uses the same spline symbol in the legend as in the series. You can change the width, and the line will get longer, but height has no effect. If the height was also changed, the legend would not be identical to the series anymore. Imagine if you had 2 series, both with round symbols where one of them is larger than the other. The only way to tell these two apart in the legend, would be the size of the symbol.
There is no setting you can set to achieve what you want, your only option would be to wrap the function that draws the legend symbols.
How to wrap functions in highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
The function that draws legend symbols: https://github.com/highcharts/highcharts/blob/master/js/parts/Legend.js#L1277
If you are going to do this, be aware that you can wrap this function for different series types, or all of them.
answered Nov 13 '18 at 9:25
ewoldenewolden
4,14631125
add a comment |
To acheieve the wanted result, you can use a simple workaround. Create additional empty spline series with the marker like you want and id property. Next, use linkedTo in basic spline series:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
type: 'spline',
linkedTo: 'fakeSeries',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}, {
type: 'spline',
marker: {
radius: 10,
symbol: 'circle'
},
color: 'black',
name: 'Temperature',
id: 'fakeSeries'
}]
Live demo: https://jsfiddle.net/BlackLabel/8cmurd3q/
API:
https://api.highcharts.com/highcharts/series.spline.linkedTo
https://api.highcharts.com/highcharts/series.spline.marker.symbol
answered Nov 13 '18 at 12:42
ppotaczekppotaczek
4,026129
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270743%2fin-highchart-how-to-change-all-the-legend-symbols-height-in-a-multiple-axes-cha%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You cannot change the legend size of the spline series, because highcharts uses the same spline symbol in the legend as in the series. You can change the width, and the line will get longer, but height has no effect. If the height was also changed, the legend would not be identical to the series anymore. Imagine if you had 2 series, both with round symbols where one of them is larger than the other. The only way to tell these two apart in the legend, would be the size of the symbol.
There is no setting you can set to achieve what you want, your only option would be to wrap the function that draws the legend symbols.
How to wrap functions in highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
The function that draws legend symbols: https://github.com/highcharts/highcharts/blob/master/js/parts/Legend.js#L1277
If you are going to do this, be aware that you can wrap this function for different series types, or all of them.
answered Nov 13 '18 at 9:25
ewoldenewolden
4,14631125
add a comment |
You cannot change the legend size of the spline series, because highcharts uses the same spline symbol in the legend as in the series. You can change the width, and the line will get longer, but height has no effect. If the height was also changed, the legend would not be identical to the series anymore. Imagine if you had 2 series, both with round symbols where one of them is larger than the other. The only way to tell these two apart in the legend, would be the size of the symbol.
There is no setting you can set to achieve what you want, your only option would be to wrap the function that draws the legend symbols.
How to wrap functions in highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
The function that draws legend symbols: https://github.com/highcharts/highcharts/blob/master/js/parts/Legend.js#L1277
If you are going to do this, be aware that you can wrap this function for different series types, or all of them.
answered Nov 13 '18 at 9:25
ewoldenewolden
4,14631125
add a comment |
You cannot change the legend size of the spline series, because highcharts uses the same spline symbol in the legend as in the series. You can change the width, and the line will get longer, but height has no effect. If the height was also changed, the legend would not be identical to the series anymore. Imagine if you had 2 series, both with round symbols where one of them is larger than the other. The only way to tell these two apart in the legend, would be the size of the symbol.
There is no setting you can set to achieve what you want, your only option would be to wrap the function that draws the legend symbols.
How to wrap functions in highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
The function that draws legend symbols: https://github.com/highcharts/highcharts/blob/master/js/parts/Legend.js#L1277
If you are going to do this, be aware that you can wrap this function for different series types, or all of them.
answered Nov 13 '18 at 9:25
ewoldenewolden
4,14631125
You cannot change the legend size of the spline series, because highcharts uses the same spline symbol in the legend as in the series. You can change the width, and the line will get longer, but height has no effect. If the height was also changed, the legend would not be identical to the series anymore. Imagine if you had 2 series, both with round symbols where one of them is larger than the other. The only way to tell these two apart in the legend, would be the size of the symbol.
There is no setting you can set to achieve what you want, your only option would be to wrap the function that draws the legend symbols.
How to wrap functions in highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
The function that draws legend symbols: https://github.com/highcharts/highcharts/blob/master/js/parts/Legend.js#L1277
If you are going to do this, be aware that you can wrap this function for different series types, or all of them.
answered Nov 13 '18 at 9:25
ewoldenewolden
4,14631125
answered Nov 13 '18 at 9:25
ewoldenewolden
4,14631125
answered Nov 13 '18 at 9:25
ewoldenewolden
4,14631125
answered Nov 13 '18 at 9:25
ewoldenewolden
4,14631125
4,14631125
add a comment |
add a comment |
To acheieve the wanted result, you can use a simple workaround. Create additional empty spline series with the marker like you want and id property. Next, use linkedTo in basic spline series:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
type: 'spline',
linkedTo: 'fakeSeries',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}, {
type: 'spline',
marker: {
radius: 10,
symbol: 'circle'
},
color: 'black',
name: 'Temperature',
id: 'fakeSeries'
}]
Live demo: https://jsfiddle.net/BlackLabel/8cmurd3q/
API:
https://api.highcharts.com/highcharts/series.spline.linkedTo
https://api.highcharts.com/highcharts/series.spline.marker.symbol
answered Nov 13 '18 at 12:42
ppotaczekppotaczek
4,026129
add a comment |
To acheieve the wanted result, you can use a simple workaround. Create additional empty spline series with the marker like you want and id property. Next, use linkedTo in basic spline series:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
type: 'spline',
linkedTo: 'fakeSeries',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}, {
type: 'spline',
marker: {
radius: 10,
symbol: 'circle'
},
color: 'black',
name: 'Temperature',
id: 'fakeSeries'
}]
Live demo: https://jsfiddle.net/BlackLabel/8cmurd3q/
API:
https://api.highcharts.com/highcharts/series.spline.linkedTo
https://api.highcharts.com/highcharts/series.spline.marker.symbol
answered Nov 13 '18 at 12:42
ppotaczekppotaczek
4,026129
add a comment |
To acheieve the wanted result, you can use a simple workaround. Create additional empty spline series with the marker like you want and id property. Next, use linkedTo in basic spline series:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
type: 'spline',
linkedTo: 'fakeSeries',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}, {
type: 'spline',
marker: {
radius: 10,
symbol: 'circle'
},
color: 'black',
name: 'Temperature',
id: 'fakeSeries'
}]
Live demo: https://jsfiddle.net/BlackLabel/8cmurd3q/
API:
https://api.highcharts.com/highcharts/series.spline.linkedTo
https://api.highcharts.com/highcharts/series.spline.marker.symbol
answered Nov 13 '18 at 12:42
ppotaczekppotaczek
4,026129
To acheieve the wanted result, you can use a simple workaround. Create additional empty spline series with the marker like you want and id property. Next, use linkedTo in basic spline series:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
type: 'spline',
linkedTo: 'fakeSeries',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}, {
type: 'spline',
marker: {
radius: 10,
symbol: 'circle'
},
color: 'black',
name: 'Temperature',
id: 'fakeSeries'
}]
Live demo: https://jsfiddle.net/BlackLabel/8cmurd3q/
API:
https://api.highcharts.com/highcharts/series.spline.linkedTo
https://api.highcharts.com/highcharts/series.spline.marker.symbol
answered Nov 13 '18 at 12:42
ppotaczekppotaczek
4,026129
answered Nov 13 '18 at 12:42
ppotaczekppotaczek
4,026129
answered Nov 13 '18 at 12:42
ppotaczekppotaczek
4,026129
answered Nov 13 '18 at 12:42
ppotaczekppotaczek
4,026129
4,026129
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270743%2fin-highchart-how-to-change-all-the-legend-symbols-height-in-a-multiple-axes-cha%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
