Highcharts use legend symbol and legend parms, not scatter marker symbols

Highcharts use legend symbol and legend parms, not scatter marker symbols - in scatter plot

I have built multiple bar charts using the same legend setup but it does not seem to transfer to a scatter plot. It instead uses the scatter marker symbols inside the legend.

I need the marker symbols to be circle and the legend symbols to be square but without using a custom legend but can't seem to get there

These are the legend options for bar graphs I am using. It works as intended but when added to the scatter plot, the legend symbol options are not being honored while the itemStyle, cursor, align and verticalAlign are...but the legend symbols are coming from the scatter marker symbols and seem to be linked.

legend: {

    enabled: true,

    symbolRadius: 0,

    symbolHeight: 16,

    symbolPadding: 15,

    itemMarginBottom: 20,

    itemStyle: {

        fontFamily: chartFont,

        fontWeight: 'normal',

        fontSize

    },

    cursor: 'pointer',

    align: 'left',

    verticalAlign: 'top'

}

The marker symbol options are defined in the series array as:

marker: {

    enabled: true, symbol: 'circle', radius: 15

}

edited Nov 12 '18 at 17:26

asked Nov 9 '18 at 18:32

james

I think that a bug, you should summit this issue on the Github repo
– Core972
Nov 10 '18 at 19:58

@Core972 why do you think this is a bug? This is the expected behavior - the chart will use a symbol appropriate to the series and/or marker type. I am not aware of configuration options to change the symbol in the legend, though there may well be a workaround...
– jlbriggs
Nov 11 '18 at 18:15

See if this topic helps: stackoverflow.com/questions/16812476/…
– jlbriggs
Nov 11 '18 at 18:16

Try a scatter chart with this .
– Core972
Nov 11 '18 at 18:32

@Core972 gave squareSymbol a shot, but no luck, thanks
– james
Nov 12 '18 at 14:17

add a comment |

I have built multiple bar charts using the same legend setup but it does not seem to transfer to a scatter plot. It instead uses the scatter marker symbols inside the legend.

I need the marker symbols to be circle and the legend symbols to be square but without using a custom legend but can't seem to get there

legend: {

    enabled: true,

    symbolRadius: 0,

    symbolHeight: 16,

    symbolPadding: 15,

    itemMarginBottom: 20,

    itemStyle: {

        fontFamily: chartFont,

        fontWeight: 'normal',

        fontSize

    },

    cursor: 'pointer',

    align: 'left',

    verticalAlign: 'top'

}

The marker symbol options are defined in the series array as:

marker: {

    enabled: true, symbol: 'circle', radius: 15

}

edited Nov 12 '18 at 17:26

asked Nov 9 '18 at 18:32

james

I think that a bug, you should summit this issue on the Github repo
– Core972
Nov 10 '18 at 19:58

@Core972 why do you think this is a bug? This is the expected behavior - the chart will use a symbol appropriate to the series and/or marker type. I am not aware of configuration options to change the symbol in the legend, though there may well be a workaround...
– jlbriggs
Nov 11 '18 at 18:15

See if this topic helps: stackoverflow.com/questions/16812476/…
– jlbriggs
Nov 11 '18 at 18:16

Try a scatter chart with this .
– Core972
Nov 11 '18 at 18:32

@Core972 gave squareSymbol a shot, but no luck, thanks
– james
Nov 12 '18 at 14:17

add a comment |

I have built multiple bar charts using the same legend setup but it does not seem to transfer to a scatter plot. It instead uses the scatter marker symbols inside the legend.

I need the marker symbols to be circle and the legend symbols to be square but without using a custom legend but can't seem to get there

legend: {

    enabled: true,

    symbolRadius: 0,

    symbolHeight: 16,

    symbolPadding: 15,

    itemMarginBottom: 20,

    itemStyle: {

        fontFamily: chartFont,

        fontWeight: 'normal',

        fontSize

    },

    cursor: 'pointer',

    align: 'left',

    verticalAlign: 'top'

}

The marker symbol options are defined in the series array as:

marker: {

    enabled: true, symbol: 'circle', radius: 15

}

edited Nov 12 '18 at 17:26

asked Nov 9 '18 at 18:32

james

I have built multiple bar charts using the same legend setup but it does not seem to transfer to a scatter plot. It instead uses the scatter marker symbols inside the legend.

I need the marker symbols to be circle and the legend symbols to be square but without using a custom legend but can't seem to get there

legend: {

    enabled: true,

    symbolRadius: 0,

    symbolHeight: 16,

    symbolPadding: 15,

    itemMarginBottom: 20,

    itemStyle: {

        fontFamily: chartFont,

        fontWeight: 'normal',

        fontSize

    },

    cursor: 'pointer',

    align: 'left',

    verticalAlign: 'top'

}

The marker symbol options are defined in the series array as:

marker: {

    enabled: true, symbol: 'circle', radius: 15

}

highcharts

edited Nov 12 '18 at 17:26

asked Nov 9 '18 at 18:32

james

edited Nov 12 '18 at 17:26

asked Nov 9 '18 at 18:32

james

edited Nov 12 '18 at 17:26

asked Nov 9 '18 at 18:32

james

asked Nov 9 '18 at 18:32

james

asked Nov 9 '18 at 18:32

james

I think that a bug, you should summit this issue on the Github repo
– Core972
Nov 10 '18 at 19:58

@Core972 why do you think this is a bug? This is the expected behavior - the chart will use a symbol appropriate to the series and/or marker type. I am not aware of configuration options to change the symbol in the legend, though there may well be a workaround...
– jlbriggs
Nov 11 '18 at 18:15

See if this topic helps: stackoverflow.com/questions/16812476/…
– jlbriggs
Nov 11 '18 at 18:16

Try a scatter chart with this .
– Core972
Nov 11 '18 at 18:32

@Core972 gave squareSymbol a shot, but no luck, thanks
– james
Nov 12 '18 at 14:17

add a comment |

I think that a bug, you should summit this issue on the Github repo
– Core972
Nov 10 '18 at 19:58

@Core972 why do you think this is a bug? This is the expected behavior - the chart will use a symbol appropriate to the series and/or marker type. I am not aware of configuration options to change the symbol in the legend, though there may well be a workaround...
– jlbriggs
Nov 11 '18 at 18:15

See if this topic helps: stackoverflow.com/questions/16812476/…
– jlbriggs
Nov 11 '18 at 18:16

Try a scatter chart with this .
– Core972
Nov 11 '18 at 18:32

@Core972 gave squareSymbol a shot, but no luck, thanks
– james
Nov 12 '18 at 14:17

I think that a bug, you should summit this issue on the Github repo
– Core972
Nov 10 '18 at 19:58

@Core972 why do you think this is a bug? This is the expected behavior - the chart will use a symbol appropriate to the series and/or marker type. I am not aware of configuration options to change the symbol in the legend, though there may well be a workaround...
– jlbriggs
Nov 11 '18 at 18:15

See if this topic helps: stackoverflow.com/questions/16812476/…
– jlbriggs
Nov 11 '18 at 18:16

Try a scatter chart with this .
– Core972
Nov 11 '18 at 18:32

@Core972 gave squareSymbol a shot, but no luck, thanks
– james
Nov 12 '18 at 14:17

add a comment |

1 Answer
1

active

oldest

votes

To acheieve the wanted result, you can use the way of drawing legend symbol from column series and set symbolRadius to 0:

Highcharts.seriesTypes.scatter.prototype.drawLegendSymbol =

    Highcharts.seriesTypes.column.prototype.drawLegendSymbol;





Highcharts.chart('container', {

    series: [{

        type: 'scatter',

        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]

    }],

    legend: {

        symbolRadius: 0

    }

});

Live demo: http://jsfiddle.net/BlackLabel/4epgLos0/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

answered Nov 12 '18 at 14:02

ppotaczek

3,896129

in the snippet I provided, I already have symbolRadius set to 0.
– james
Nov 12 '18 at 14:14

Hi james, Yes, but you did not overwrite the method in scatter prototype. Please check the live demo above.
– ppotaczek
Nov 12 '18 at 15:01

oh right, I will try that out, thanks!
– james
Nov 12 '18 at 17:14

that did the trick, great work and thanks again!
– james
Nov 12 '18 at 17:20

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53231491%2fhighcharts-use-legend-symbol-and-legend-parms-not-scatter-marker-symbols-in-s%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

To acheieve the wanted result, you can use the way of drawing legend symbol from column series and set symbolRadius to 0:

Highcharts.seriesTypes.scatter.prototype.drawLegendSymbol =

    Highcharts.seriesTypes.column.prototype.drawLegendSymbol;





Highcharts.chart('container', {

    series: [{

        type: 'scatter',

        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]

    }],

    legend: {

        symbolRadius: 0

    }

});

Live demo: http://jsfiddle.net/BlackLabel/4epgLos0/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

answered Nov 12 '18 at 14:02

ppotaczek

3,896129

in the snippet I provided, I already have symbolRadius set to 0.
– james
Nov 12 '18 at 14:14

Hi james, Yes, but you did not overwrite the method in scatter prototype. Please check the live demo above.
– ppotaczek
Nov 12 '18 at 15:01

oh right, I will try that out, thanks!
– james
Nov 12 '18 at 17:14

that did the trick, great work and thanks again!
– james
Nov 12 '18 at 17:20

add a comment |

To acheieve the wanted result, you can use the way of drawing legend symbol from column series and set symbolRadius to 0:

Highcharts.seriesTypes.scatter.prototype.drawLegendSymbol =

    Highcharts.seriesTypes.column.prototype.drawLegendSymbol;





Highcharts.chart('container', {

    series: [{

        type: 'scatter',

        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]

    }],

    legend: {

        symbolRadius: 0

    }

});

Live demo: http://jsfiddle.net/BlackLabel/4epgLos0/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

answered Nov 12 '18 at 14:02

ppotaczek

3,896129

in the snippet I provided, I already have symbolRadius set to 0.
– james
Nov 12 '18 at 14:14

Hi james, Yes, but you did not overwrite the method in scatter prototype. Please check the live demo above.
– ppotaczek
Nov 12 '18 at 15:01

oh right, I will try that out, thanks!
– james
Nov 12 '18 at 17:14

that did the trick, great work and thanks again!
– james
Nov 12 '18 at 17:20

add a comment |

To acheieve the wanted result, you can use the way of drawing legend symbol from column series and set symbolRadius to 0:

Highcharts.seriesTypes.scatter.prototype.drawLegendSymbol =

    Highcharts.seriesTypes.column.prototype.drawLegendSymbol;





Highcharts.chart('container', {

    series: [{

        type: 'scatter',

        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]

    }],

    legend: {

        symbolRadius: 0

    }

});

Live demo: http://jsfiddle.net/BlackLabel/4epgLos0/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

answered Nov 12 '18 at 14:02

ppotaczek

3,896129

To acheieve the wanted result, you can use the way of drawing legend symbol from column series and set symbolRadius to 0:

Highcharts.seriesTypes.scatter.prototype.drawLegendSymbol =

    Highcharts.seriesTypes.column.prototype.drawLegendSymbol;





Highcharts.chart('container', {

    series: [{

        type: 'scatter',

        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]

    }],

    legend: {

        symbolRadius: 0

    }

});

Live demo: http://jsfiddle.net/BlackLabel/4epgLos0/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

answered Nov 12 '18 at 14:02

ppotaczek

3,896129

answered Nov 12 '18 at 14:02

ppotaczek

3,896129

answered Nov 12 '18 at 14:02

ppotaczek

3,896129

answered Nov 12 '18 at 14:02

ppotaczek

3,896129

in the snippet I provided, I already have symbolRadius set to 0.
– james
Nov 12 '18 at 14:14

Hi james, Yes, but you did not overwrite the method in scatter prototype. Please check the live demo above.
– ppotaczek
Nov 12 '18 at 15:01

oh right, I will try that out, thanks!
– james
Nov 12 '18 at 17:14

that did the trick, great work and thanks again!
– james
Nov 12 '18 at 17:20

add a comment |

in the snippet I provided, I already have symbolRadius set to 0.
– james
Nov 12 '18 at 14:14

Hi james, Yes, but you did not overwrite the method in scatter prototype. Please check the live demo above.
– ppotaczek
Nov 12 '18 at 15:01

oh right, I will try that out, thanks!
– james
Nov 12 '18 at 17:14

that did the trick, great work and thanks again!
– james
Nov 12 '18 at 17:20

in the snippet I provided, I already have symbolRadius set to 0.
– james
Nov 12 '18 at 14:14

Hi james, Yes, but you did not overwrite the method in scatter prototype. Please check the live demo above.
– ppotaczek
Nov 12 '18 at 15:01

oh right, I will try that out, thanks!
– james
Nov 12 '18 at 17:14

that did the trick, great work and thanks again!
– james
Nov 12 '18 at 17:20

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky