Develop Reference

Is it possible to use gradient + background color for areaColor along with visualMap

thanks for your time!
I am using a similar example to visualize my data.
I want to improve the visualization of the map and make a gradient. More or less like this. After reading the documentation, I realized that apparently this is not possible:
inRange: {
color: [
new echarts.graphic.RadialGradient(0.5, 0.5, .5, [
{
offset: 0,
color: 'green'
},
{
offset: 0,
color: 'rgb(35, 184, 116, 0.2)'
}]),
'rgba(255, 88, 74, 0.7)'
]
}
I tried to play around with overlaying two equivalent series and different settings for them, but unfortunately it doesn't work.

I solved the problem. By adding a gradient like this.
const mapOptions = {
series: [
...,
{..., itemStyled: {..., areaColor: gradient}},
]
}
And I already created the information panel manually and added functionality through
mapInstance.setOptions(newSeriesOption)

echarts: Is there any way to change the `axisPointer` shadow to a lighter grey shadow?

I am trying to change the default shadow color (when hovering over a bunch of bars for example: https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-label-rotation)
Focusing on this example on this code part:
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}, .......
..............................
............................................
the type variable has 3 options as stated in the documentation:
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.tooltip.axisPointer.type
but I couldn't find anything that can control the color of the shadow.
I want it in a much lighter gray color than it is by default.
Is there any other way to set the shadows color?
I have been exploring echarts.js for a while.. and sadly, except of the fact that all charts graphics are amazing, unfortunately - I find more cons than pros :(

Try this:
axisPointer.shadowStyle.color
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // color at 0% position
}, {
offset: 1, color: 'blue' // color at 100% position
}],
globalCoord: false // false by default
}
It is given in their documentation. Check this out: https://ecomfe.github.io/echarts-doc/public/en/option.html#axisPointer

Data driven line-width in Mapbox JS GL

I have added a geojson to my map. One of the feature's properties is called delay - it contains numbers between 0 and 160. Below, I have tried to make line-width a function of the value in this property (using this link as an example), just as one would style color. In fact, I would like it to be a mathematical function ( sqrt(delay) as opposed to using categories), but in either case I receive a syntax error in the console every time unexpected ")", suggesting that one cannot style line-width in the same way as color. What would be the best workaround in Mapbox JS GL?
map.on('load', function () {
map.addSource("routes", {
"type": "geojson",
"data": "simplify_830.geojson"
});
map.addLayer({
"id": "routes",
"type": "line",
"source": "routes",
"layout": {},
"paint": {
"line-color": "#FFA500",
'line-width': {
property: 'delay',
stops: [
[0, 2],
[20, 4],
[40, 6],
[60, 8],
[80, 10],
[100, 12],
[120, 14],
[140, 16],
[160, 20]
]
},
"filter": ["==", "name", ""]
});

We don't yet support data-driven styling for line properties.
We plan to add it very soon per http://github.com/mapbox/mapbox-gl-js/issues/2729.
My apologies for not more clearly communicating the state of data-driven styling support. A colleague of mine is working on a support table now! https://github.com/mapbox/mapbox-gl-style-spec/pull/465

Inject a CSS class into HighCharts

I'm trying to use CSS classes to prevent repeating color codes (per example) on the highchart that I'm working on right now. The idea is that these CSS classes will be used here but considering that not all charts that come afterwards are going to be the same as this one, I don't want to manipulate the style of all of them.
Here's an example of what I'm trying to do.
The javascript, changing the background of it to the colour on the CSS class
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '.bc'
},...
The css:
.bc{
background-color: #2b2b2b;
}
Is what I'm trying to do possible? If not, would there be a workaround?

backgroundColor:color
the background color can get any color like
backgroundColor: '#42431D'
the defaults value is #FFFFFF (white)
the other option is gradient -
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(0, 0, 0)'],
[1, 'rgb(0, 0, 0)']
..........
]
I do not think there are other options in this case

how do you change the color of cells in highcharts heatmap?

has anybody played around with the new highcharts library. This is the sample jsfiddle I am looking at:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/heatmap/
Each cell color is blue, it needs to change based on the data in cells. I thought this line of code was supposed to do that. Any ideas how to change the color or each cell based on data. For example if we are working with data from 1 to 10. if the data in a cell is 1, the cell should be green colour if the data is 10 is should be read, based on the following options. Any ideas how to do this?
colorAxis: {
stops: [
[0,'green'],
[0.5,'orange'],
[0.9,'red']
],
min: -20
},

stops: [
[0, '#FF0000'],
[1, '#00FF00'],
[2, '#FFA500'],
[3,'#FFFF00']
],
min: 0,
max: 1
This will give you the exact colours also in the series you need to give the json Object like this:
{"x":0,"y":0,"value":0,"myData":"Critical"} The value is the attribute which gives exact colour

Use colors for list of colors,
In colorAxis declare dataClassColor as 'category' and define your data range in
dataClasses
colors : ['#D7EDE5', '#9BD1BE', '#37A47E'],
colorAxis : {
dataClassColor : 'category',
dataClasses : [{
to : 57.1
}, {
from : 57.2,
to : 60.4
}, {
from : 60.5
}
]
},
Demo http://jsfiddle.net/patelriki13/q2yww0vw/

You need to use Highcharts 3.0.10, to set colours.