ZingChart: How do you style legend icons?
Yes, you can set marker styling from within the JSON configuration using the legend.item and legend.marker attributes.
It is easy to set the type of marker using the type property. The value takes common ZingChart shapes such as circle
, star3
, star5
, star6
, star9
, square
, diamond
, triangle
, plus
, and cross
. It is certainly possible to set markers to whatever shape you want but the value of match
is most appropriate as it will match what is rendered in a particular series onto the legend.
legend: { marker: { type: 'match' } }
With match
set then you would need to set the marker on the series. If you want to set it for all series to be the same shape. Use the plot object with marker like so.
plot: { marker: { type: 'star5' } }
If you want to set the markers by series it is easy enough to include the marker object inside each entry in the series array.
series: [ { marker: { type: 'circle' }, values: [35,42,67,89,25,34,57,35] }, { marker: { type: 'star5' }, values: [10,20,10,15,20,30,45,15] }, { marker: { type: 'triangle' }, values: [50,30,40,45,50,56,55,25] } ]
For many chart types you may desire to modify the marker to show the plotted line to do this set showLine
to true like so.
legend: { marker: { showLine: true } }
Finally since you have all of ZingChart's styling options available you can change the colors, borders, background, and other variety of effects as you may see fit. The example below may give you some ideas of the flexibility afforded to you.
Example: https://demos.zingchart.com/view/N20HS3VA
Documentation
Plot Marker JSON Syntax
Plot Legend Marker JSON Syntax
Legend Marker JSON Syntax