I am using Highmaps in one of my web based application. Until now it was easy to modify it according to my use case but now i need to changes the border color of the region and i am unable to do it.
Code i have tried but failed:
chart: {
plotBorderColor: '#ffffff',
borderColor: "#ffffff",
}
See attached image what i want to achieve
Want to change the outline color to white
http://jsfiddle.net/qLen614m/
You can use the stroke attribute of the path element:
path {
stroke: white;
}
There is an options to set border color for map series. It is borderColor and it should be set in series.
series : [{
borderColor: 'white',
...
API link
Example: http://jsfiddle.net/qLen614m/1/
You should use borderWidth property for series.
The border width of each map area.
series: [{
borderWidth: 2
}]
Here is the official demo.
Related
I am creating Gradient chart using Ant Design Charts and want to change the overall color of data points but on using the color property, it is only changing the border/stroke and not the internal color. Here's the link to the plot which I am using:
https://charts.ant.design/en/examples/area/basic#basic-gradients
This is the config code which I am using:
const config = {
data,
xField: 'Date',
color: "#1DD1A1",
yField: 'scales',
xAxis: {
range: [0, 1],
tickCount: 5,
},
areaStyle: () => {
return {
fill: '#1DD1A1',
};
},
};
And here is the component:
<Area {...config} xAxis={false} yAxis={false} style={{marginTop: "45px"}} height={270} tooltip={false} smooth={true} point={{color: "#9F7DE1"}} line={{color: "#9F7DE1"}}/>
Following is an image, I basically want the change the white color of entire point to purple just like the line color.
I have created a HighChart in a Ag data grid cell. On hovering over the Line chart, I need to display a tooltip with few details. I am able to show the tooltip within the cell, but as the tooltip is displayed within the cell, the content gets hidden in the cell. I need to display the tooltip in such a way that it can overlap and display the tooltip over another cell.
I tried setting the z-index to 99999 & position as relative/absolute of highchart tooltip. But it does not reflect.
Tried to override the css class .highcharts-tooltip by adding z index
Please can some css expert help me identify the issue?
There is no need to modify the CSS of the highchart tooltip.I followed the properties used in the below URL & it worked for me:
https://www.highcharts.com/demo/sparkline
I had missed out adding below chart options:
tooltip: {
outside: true,
}
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
}
}
I did Lottie animation by using Lottie-web and now trying to change the color dynamically so I used Lottie API(https://github.com/bodymovin/lottie-api). In that, I got the keyPath for changing the color but don't know how to change the color of an object.
This is the code for creating the lottie object animation
var animData = {
container: animationContainer,
renderer: "canvas",
loop: true,
autoplay: true,
rendererSettings: {
preserveAspectRatio: "xMidYMid meet"
},
path: "https://labs.nearpod.com/bodymovin/demo/chameleon/chameleon2.json"
};
anim = lottie.loadAnimation(animData);
for changing the color of a Lottie JSON I used
animationAPI.getKeyPath(
"#leaf_3,Contents,color_group,fill_prop,Color"
);
I got the path of an object but now I don't know how to change the color so Kindly help me if anyone knows?
The easiest way to make the color dynamic for a shape in Lottie is to rename your "Stroke 1" or "Fill 1" in After Effects to "#somename". After exporting, you can reference that shape in your CSS like this:
#somename {
stroke: red;
/*or*/
fill: red;
}
You can use lottie-colorify package to change animation colors:
const animation = Lottie.loadAnimation({
container: container.current,
animationData: colorify(['#ef32d0', [50, 100, 200], '#fe0088'], SomeAnimation),
});
I'm working with nvd3 and I'm not much hands-on with its styling (css properties) to customize it. I have a line chart with two data lines on it.
The code for drawing the lines is following:
nv.addGraph(function() {
chart = nv.models.lineChart();
chart.margin({
left : 100,
bottom : 100
}).useInteractiveGuideline(true).showLegend(true).duration(250);
chart.xAxis.axisLabel("Date").tickFormat(function(d) {
var date = new Date(d);
return d3.time.format("%b-%e")(date);
});
chart.yAxis.axisLabel('').tickFormat(d3.format(',.2f'));
chart.showXAxis(true);
d3.select('#startupRiskLineChart').datum(
prepareDataObj(val1_y, val1_x, val2_y, val1_x))
.transition().call(chart);
;
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
Is there any way to fill the area under data line with a lighter color?
Any help would be highy apperiated.
To get a line chart with a filled area in a specific color:
Add area: true to the data series, as in this example.
Add this CSS: .nv-area { fill: red }
The opacity of the area is set to 0.5, so filling it with red will actually make it pink:
chart.color(["red","yellow","blue"]);
'#00FFFF','#0FF','cyan' all are valid ways to set colors
Another way is set it in data itself
[{
values:[{x:1,y:1},{x:2,y:4},{x:3,y:9},{x:4,y:16}],
key: 'not a Sine Wave',
color: '#ff7f0e' //color - optional: choose your own line color.
}]
duplicate question i guess
Add
classed: "my-custom-approx-line"
to config of specific line and add styling:
&.nv-area {
fill-opacity: 0.2;
}
As of commit #becd772
Use .nv-group{ fill-opacity: 1.0 !important; } to fill the area with the same color as the line
How to set and keep FT Layer polygon style options when setting certain polygons' colour on-click?
Dr Molle kindly helped me out with toggling polygons from a FT, but I want to set the opacity/colour of the initial FT layer polygons - this is easy with
styles: [{polygonOptions: {fillOpacity: 0.2,fillColor:"#00FF00",strokeWeight: 1,}}]
but as soon as a clicked polygon has its colour set via
layer_0.set("styles", [{
where: "'Postcode district' IN('"+vals.join("','")+"')",
polygonOptions: {
fillColor: "#000000"
}
}]);
it resets the 'default' back to the ~50% opacity red.
Below is the altered jsfiddle from Dr.Molle
http://jsfiddle.net/yh2WX/
When you overwrite the "styles" property in the click listener, you need to keep the default setting
fiddle: http://jsfiddle.net/9N9p2/1/
layer_0.set("styles", [
{
polygonOptions: {fillOpacity: 0.2,fillColor:"#00FF00",strokeWeight: 1,}
},{
where: "'Postcode district' IN('"+vals.join("','")+"')",
polygonOptions: {
fillColor: "#000000"
}
}]);