I want to show a map like this
My code show showing only the polygon area.
Here is my code:
<MapboxGL.ShapeSource
id="polygonSource"
maxZoomLevel={12}
shape={{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[-64.13955742852858, -37.12282253796483],
[-64.1177564338672, -37.12241191755813],
[-64.11689812699333, -37.14376122487725],
[-64.12805611638079, -37.14430856379878],
[-64.12736947088707, -37.13404529984051],
[-64.13835579890784, -37.13281361461875]
]
],
},
}}>
<MapboxGL.FillLayer
id="polygion"
style={{
fillOpacity: 0.5,
fillColor: '#bbff33',
fillOutlineColor: 'red',
// fillColor: 'rgba(255, 255, 255, 0.2)',
}}
/>
</MapboxGL.ShapeSource>
I was trying to make a polygon on the map and gray outside the area of the polygon.
Anyone who can explain where am I'm doing wrong.
I have solved my problem by doing this with coordinates.
<MapboxGL.ShapeSource
id="polygonSource"
maxZoomLevel={12}
shape={{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
[-193.359375, -52.908902047770255],
[192.65625, -52.908902047770255],
[192.65625, 84.19650681922975],
[-193.359375, 84.19650681922975],
[-193.359375, -52.908902047770255],
],
[
[-77.05796599388123, 38.961269179625134],
[-77.05622792243958, 38.96127752205847],
[-77.05621719360352, 38.96044327386091],
[-77.05621719360352, 38.95991769245298],
[-77.05600261688231, 38.95884983250593],
[-77.0563244819641, 38.95831589649745],
[-77.05686092376709, 38.957898756191405],
[-77.05697894096375, 38.957698527972255],
[-77.05717206001282, 38.957089496994705],
[-77.05738663673401, 38.956780808062035],
[-77.05768704414368, 38.95672240730187],
[-77.05801963806152, 38.95673909323827],
[-77.0582127571106, 38.95663897756105],
[-77.05847024917603, 38.95632194365002],
[-77.05842733383179, 38.9560132513738],
[-77.05767631530762, 38.95559609751282],
[-77.05752611160278, 38.95532077461942],
[-77.05763339996336, 38.95504545065637],
[-77.05765485763548, 38.954736752819755],
[-77.05740809440613, 38.95437799418506],
[-77.0558202266693, 38.95349360467786],
[-77.0552408695221, 38.95292625465489],
[-77.05503702163696, 38.95266760828427],
[-77.05485463142394, 38.95213362569452],
[-77.05441474914551, 38.95193338118615],
[-77.05340623855591, 38.95174147966809],
],
],
},
}}>
<MapboxGL.FillLayer
id="polygion"
style={{
fillOpacity: 0.7,
fillColor: '#b4b4b4',
fillOutlineColor: '#b4b4b4',
}}
/>
</MapboxGL.ShapeSource>
Related
How to show "No data available" message in react chart js line chart when there is no data available
<Line
chartData={{
labels: [],
datasets: [
{
id: 1,
label: 'Users',
data: dauData,
borderColor: '#86C6FF',
backgroundColor: '#86C6FF',
tension: 0.4, // disables bezier curves
},
],
}}
options={{
plugins: {
legend: {
display: false,
},
},
}}
/>
How to set the labels & x axis and y axis colour into white here? It is coming in grey colour and I don't know why, or how to reset it to white colour .
I need my y axis which goes as "10,20,30,40,50..." font color as white, and x axis which goes as "jan,feb,mar..." font color into white, and on top there is label giving Appointment and canceled which I want its color also to be white.
const data = {
labels: graph,
datasets: [
{
label: "Appointment",
data: appointment,
backgroundColor: "#6c8bff",
Color: "white",
// hoverBackgroundColor: "rgba(255,99,132,0.4)",
borderColor: "#6c8bff",
borderWidth: 1,
},
{
label: "Cancelled",
Color: "white",
backgroundColor: "red",
borderColor: "red",
borderWidth: 1,
data: cancelled,
},
],
};
const options = {
legend: {
labels: {
fontColor: "white",
// fontSize: 18,
},
},
scales: {
yAxes: [
{
ticks: {
fontColor: "white",
beginAtZero: true,
},
},
],
},
};
return (
<>
<Bar data={data} options={options} />
</>
);
}
Apply border radius to the bars of Bar_Chart using react-chartjs-2 module so please suggest changes in this code only.
i tried radius in data component but it didn't work .
import { Bar } from 'react-chartjs-2';
<Bar
data={{
labels :['2020-10-26', '2020-10-27', '2020-10-28', '2020-10-29'],
datasets: [
{
label: 'r',
data: [130,220,310,420],
backgroundColor: 'rgb(255, 144, 18)',
},
{
label: 'm',
data: [100,200,149,330],
backgroundColor: '#66CCFF',
},
{
label: 'u',
data: [90,150,30,240],
backgroundColor: '#00FF99',
},
],
}}
options={{
responsive: true,
cornerRadius:19,
// plugins: {
legend: {
cursor: "pointer",
display:true,
position:'bottom',
labels: {
usePointStyle: true,
boxWidth:10,
}
},
// },
scales: {
xAxes: [{
gridLines: {
display:false
}
}]}
}}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
/>
Want my bars to be round from above like this only visuals are example not code
https://codepen.io/jordanwillis/pen/jBoppb
You have to apply borderRadius parameter in datasets as per below code
datasets: [
{
label: 'r',
data: [130,220,310,420],
backgroundColor: 'rgb(255, 144, 18)',
borderRadius : 50 // You can apply any value as per your requirement
},
{
label: 'm',
data: [100,200,149,330],
backgroundColor: '#66CCFF',
borderRadius : 50
},
{
label: 'u',
data: [90,150,30,240],
backgroundColor: '#00FF99',
borderRadius : 50
}]
Try borderRadius in options object instead
I am using highchart to get bar chart, i have used plotbands here so my requirement is i need to get the plotband only for the one row xaxis.
here it is the snippet for example.
https://jsfiddle.net/z6kug43w/20/
xAxis: {
plotBands: [{
from: 0.4,
to: 0.6,
color: '#fff',
zIndex: 3
},
{
from: 1.4,
to: 1.6,
color: '#fff',
zIndex: 3
},
{
from: 2.4,
to: 2.6,
color: '#fff',
zIndex: 3
},
{
from: 3.4,
to: 3.6,
color: '#fff',
zIndex: 3
}],
categories: ["abc (1%)", "abcd (1%)", "abce (1%)", "abcf (1%)", "abcg (1%)", "abch (1%)"],
crosshair: true
},
yAxis: {
min: 0,
plotBands: [{
from: 0,
to: 100,
thickness: '2%',
color: '#D5D5D6'
}],
title: {
text: 'Rainfall (mm)'
}
},
Please take a look at this custom plugin which allows you to defining the low and high values for the plotBands.
Demo: https://jsfiddle.net/BlackLabel/n3okxjug/
xAxis: {
categories: ["abc (1%)", "abcd (1%)", "abce (1%)", "abcf (1%)", "abcg (1%)", "abch (1%)"],
crosshair: true,
plotBands: [{
from: 0.5,
to: 1.5,
color: 'red',
low: '60%',
high: '100%'
}]
},
Is this a result which you wanted to achieve?
I am using victory to create charts, but VictoryLegend does not provide such kind of legend. Is there any existing react Legend component that can be used directly?
From a brief look at the docs it looks like victory does provide legends, read more here
Here's a simple implementation from their docs:
<VictoryLegend x={125} y={50}
title="Legend"
centerTitle
orientation="vertical"
gutter={20}
style={{ border: { stroke: "black" }, title: {fontSize: 20 } }}
data={[
{ name: "One", symbol: { fill: "tomato", type: "square" } },
{ name: "Two", symbol: { fill: "orange", type: "square" } },
{ name: "Three", symbol: { fill: "gold", type: "square" } }
]}
/>
To create square shaped points specify type "square", other options are listed here.
You can choose "circle", "diamond", "plus", "square", "star",
"triangleDown", "triangleUp"