I am trying to figure out how to add a legend to the example vega visualization here. Any example of how to do this would be appreciated. Preferably it would be interactive and highlight or show data on the visualization, but even just a simple legend would be a big improvement.
Thank you
For a simple starting point using legends in this Vega Donut Chart Demo:
Here's the same example Vega sandbox with my legends code from below added in after the marks section.
Here is the legend code I used:
"legends": [
{
"fill": "color",
"title": "This is the Title",
"orient": "top-left",
"encode": {
"symbols": {"enter": {"fillOpacity": {"value": 0.5}}},
"labels": {"update": {"text": {"field": "value"}}}
}
}
]
This should serve as a useful example starting point for you. Other properties of legends can be found here.
Related
I have created some custom styles in mapbox studio. They are essentially just the mapbox outdoors style and the mabpox satellite style, each customized, separated out into 2 styles each: the basemap with no labels at all, and only the labels without the basemap. I want to give the user the ability to toggle layers on and off, or set the transparency. You can see the layers here:
Outdoors labels only
Satellite labels only
Within mapbox studio, the tiles show transparency where there are no roads / labels / etc. This is what I would expect. I am then using these layers in leaflet like so:
var mapBoxOutdoorsLabels = L.tileLayer(
'https://api.mapbox.com/styles/v1/slutske22/ck87tp2fq0rq41iqox69g4ko5/tiles/256/{z}/{x}/{y}#2x?access_token={accessToken}',
{ accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map1)
var mapBoxSatelliteLabels = L.tileLayer(
'https://api.mapbox.com/styles/v1/slutske22/ck8i7fv4h0h771ipc6mwzwmp4/tiles/256/{z}/{x}/{y}#2x?access_token={accessToken}',
{ accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map2)
As far as I can tell, the way I'm importing these two layers is identical. But for some reason, my labels layer for outdoors shows up properly (with transparent background), while my labels layer for satellite shows up with all black background, and you cannot see through to the basemap. The map on the right is the problem:
Here is a working codesandbox of the problem
I'm not sure what I'm doing wrong in mapbox studio or in my leaflet import for the tiles to be generated with black instead of transparent. The way I'm building the two maps are identical, at least as far as I can tell. Any ideas?
Thanks for reading.
The background layers in your labels mapbox style are not transparent.
Here is a codepen with a copy of your style with the background fixed
What I did:
Removing the /tiles/{x}/{y}/{z}/ part from your style's URL and running that in a browser returns the json from mapbox.
There I saw that your background layer color is missing the alpha channel value.
"layers": [
{
"id": "background",
"type": "background",
"layout": {
"visibility": "none"
},
"paint": {
"background-color": "hsl(222, 56%, 4%)" <= SHOULD BE (222, 56%, 4%, 0)
},
I was able to save the json file and upload it as my own style on https://studio.mapbox.com/
there I changed the alpha channel of the background and reduced the opacity of the satellite layer.
It appears that "visibility: none" doesn't work as intended
exported as a new style, I updated the fork with my style and access token
i'm trying to show highchart legend in order like this
but im getting like this
please help me how to show in order like in first image
I assume what you want is the columns lined up. That just requires legend.alignColumns = true.
legend: {
alignColumns: true,
width: 500,
},
http://jsfiddle.net/blaird/1fu20j4g/7/
Highcharts has a great API reference. Here's everything you can do to a legend: Highcharts Legend API Reference
See this JSFiddle of a bullet chart showing decimal values in the x-axis.
https://jsfiddle.net/5az19o2t/
I've tried to remove the decimals with the following options:
{ xAxis: { minTickInterval: 1, tickInterval: 1, allowDecimals: false }}
None of those options appear to do anything. How can I define the tick intervals on a Bullet Chart?
Thanks in advance!
I'm going to answer my own question, and then maybe someone can explain to me why it is.
Placing those settings on the Y-Axis config does adjust the chart. Doesn't basic charting 101 dictate that X-Axis is left to right, and Y-Axis is up and down?
{yAxis: minTickInterval: 1} or {yAxis: allowDecimals: false}
both work.
Radar chart works fine if the values for different labels are relatively same in size. [ jsFiddle ]
If any label has a very large value relative to other labels, chart gets squeezed to a straight line. Which looks horrible.
[ jsFiddle ]
This question shows how to set custom scaleStepWidth and scaleStep,
but if I use it Chart goes past its boundaries.
[ jsFiddle ]
is there any way to set different scaleStepWidth for different labels ?
Convert all your values to percentages of the series total. Then you have numbers that make sense to compare and you can plot them on the same scale.
I'm trying to create a bubble polar chart with Highcharts, is this possible? Documentation isn't clear about this, and my attempts so far haven't been successful.
It would something look like this:
What have you tried? It's just polar chart with series bubble, see: http://jsfiddle.net/ZYKQG/
series: [{
type: 'bubble',
name: 'bubble',
data: [[100,2,3.3],[45,5,3.2],[225,5,3.1]],
pointPlacement: 'between'
}]