I want to create this:
Aspiration
So far, I have managed to create this:
crap
I want to move the color label descriptions that are appearing above the chart to the left side.
Here's my code:
const data = {
datasets: [
{
data: [20, 30, 50],
backgroundColor: ["#EB6262", "#39BDE7", "#0B8878"],
borderWidth: 8,
borderColor: theme.palette.white,
hoverBorderColor: theme.palette.white,
},
],
labels: ["Pending", "In Process", "Completed"],
};
<Doughnut data={data} />
Related
I'm using Amchart 5, I trying to customize the colors, labels and other stuffs using CSS. But Amchart 5 only shows the charts as Canvas not as individual element like amchart 4.
amchart Canvas - Inspect Panel
If someone have solution please let me know, it'll be very helpful.
Thank you in advance.
I'm expecting a code to enables the css in the chart.
You cannot use CSS this way with amCharts 5 because, contrary to amCharts 4, it uses the Canvas API instead of SVG. There is an exception when you need HTML content, though...
Canvas API is generally way faster than SVG, however it paints outside DOM tree, which means you can't target individual chart elements via JavaScript or CSS.
Migrating from amCharts 4 – amCharts 5 Documentation
To customize chart elements, you have to define settings in your JS code. A label, for instance, can be configured like this:
am5.Label.new(root, {
text: "Title",
fill: am5.color("#ff0000"),
fontSize: 25,
fontWeight: "500",
fontStyle: "italic",
textAlign: "center",
x: am5.percent(50),
centerX: am5.percent(50),
dy: -60
// ...
});
You can find a complete list of settings there: Label – amCharts 5 Documentation
Here is a basic example:
am5.ready(() => {
let root = am5.Root.new("chartdiv");
let chart = root.container.children.push(am5xy.XYChart.new(root, {
paddingTop: 50
}));
// ========================= HERE =========================
chart.children.unshift(am5.Label.new(root, {
text: "Title",
fill: am5.color("#ff0000"),
fontSize: 25,
fontWeight: "500",
fontStyle: "italic",
textAlign: "center",
x: am5.percent(50),
centerX: am5.percent(50),
dy: -50
}));
// ==================================================
let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: am5xy.AxisRendererX.new(root, {})
}));
let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
}));
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
categoryXField: "category",
valueYField: "value"
}));
let data = [{
category: "Category 1",
value: 10
}, {
category: "Category 2",
value: 20
}, {
category: "Category 3",
value: 15
}];
xAxis.data.setAll(data);
series.data.setAll(data);
});
#chartdiv {
width: 100%;
height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>
I am trying to make a background using two View to look , but I am falling to set the "start" of the radius on the left size.
The result I get using :
borderBottomLeftRadius: '20%',
borderBottomRightRadius: '40%',
Is this:
But I want this:
I want the "radius" start more vertically
Any tips how I get this effect?
Thank you
Exact shaping like this through radius is probably not possible, I achieved this by use of transform: [{ scale }]
Here is the code
const { width } = useWindowDimensions();
<View
style={{
backgroundColor: '#00ffff',
borderBottomLeftRadius: width / 3,
borderBottomRightRadius: width / 2,
borderWidth: 2,
borderColor: 'black',
height: width / 2,
width: width,
transform: [{ scale: 1.4 }],
}}
/>
Here what it looks like, is this workable for you?
you can tweak the values a little bit to meet your requirement.
I am using the react-native-simple-radio-button package. If I specify a fontSize for the label greater than 22, the top half gets cut off. Making the radio buttons even bigger does not seem to make a difference.
Here is my code:
let radio_props = [
{label: 'ABC ', value: 0},
{label: 'DEF', value: 1}
]
let menu = <View style={{marginLeft: 40, marginTop: 40}}>
<RadioForm
radio_props = {radio_props}
buttonSize = {40}
buttonOuterSize={60}
labelStyle = {{fontSize: 30}}
initial={this.state.mode}
formHorizontal={true}
onPress={(value) => this.onPress(value)}
/>
</View>
This code produces the following results:
Is there something I am doing wrong or is it a bug in the react-native-simple-radio-button module?
Adding padding to the top worked for me
labelStyle={{
fontSize: 30,
paddingTop: 6
}}
I need That the header shows when I export the Chart to Image
My Chart is Like This :
But when I export it to Image it's Without the header
Can any one help me to fix this , Txs, Marwen
AmChart widget allows you to export only widget's content without box header.
You can achieve needed result with AmChart's functionality.
Just set below code as a value to
"Edit... > Widget > Advanced Properties > Extra Options"
:{"allLabels": [
{
"text": "Product Sale",
"size": 32,
"bold": true,
"x": 0,
"y": 0
}]}
UPDATE
If your title overlays the chart you can try to change widget box's height and width along with extending "Extra options" with "marginLeft" and "marginTop" options which allow you to create needed room for chart and it's title:
:{"allLabels": [
{
"text": "Product Sale",
"size": 32,
"bold": true,
"x": 0,
"y": 0
}],
"marginTop":50,
"marginLeft":50}
I'm plotting a map made by a series of points in HighCharts. I want that map to be properly scaled and be a perfect square.
Thus, i've set the chart height and width at the same value:
$(function () {
$('#map-container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy',
height: 225,
width: 225
},
title: {
text: null
},
subtitle: {
text: null
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: <?php echo $lat_bon_min; ?>,
max: <?php echo $lat_bon_max; ?>,
labels: {
enabled: false
},
title: {
text: null
}
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: <?php echo $lon_bon_min; ?>,
max: <?php echo $lon_bon_max; ?>,
labels: {
enabled: false
},
title: {
text: null
}
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 2
}
}
},
series: [{
showInLegend: false,
type: 'scatter',
color: 'rgba(223, 83, 83, .5)',
data: map_data,
keys: ['time', 'x', 'y']
}]
});
});
The problem is that the chart container is a square, but the plot area is not.
I made a screenshot of the result. Red line is the map, black square is the chart container (which is a perfect square), blue rectangle is the plot area which you can see is not a square.
How can i set plot area size in order to make it a perfect square?
You can extend Highcharts with new function. Here you can find information about extending Highcharts:
http://www.highcharts.com/docs/extending-highcharts/extending-highcharts
As you will see in my demo, I wrapped setChartSize function and give them possibility to use parameters from your chart options:
chart: {
plotAreaWidth: 300,
plotAreaHeight: 200
},
Function is also positioning your plot area in the middle of chart container.
example:
http://jsfiddle.net/izothep/eph5secj/2/
In your chart default values of spacing are used and the biggest is a bottom spacing with value of 15 while others are of value 10 each. When setting all spacing to 15 you will get a square (196 x 196 px).
Example: http://jsfiddle.net/5825mzLs/
You might want to use marginLeft, marginRight, marginTop and marginBottom properties.
The margin options (marginLeft, marginTop etc) give the margin to the actual plot area and does not apply to other elements on the chart (labels, legend etc)
See example in Hightscharts Docs: https://www.highcharts.com/docs/chart-design-and-style/design-and-style