Comments (13)
martynasma
commented on September 7, 2024
2
Updated CodePen:
https://codepen.io/team/amcharts/pen/MWMBVMx/344d95bb965694d8dd3fa695f00835ce?editors=0010
from amcharts5.
martynasma
commented on September 7, 2024
1
Here you go:
am5plugins_json.JsonParser.new(root).parse(
{
refs: [
{
data: [
{
country: "France",
sales: 100000
},
{
country: "Spain",
sales: 160000
},
{
country: "United Kingdom",
sales: 80000
}
]
},
{
series: {
type: "PieSeries",
settings: {
name: "Series",
valueField: "sales",
innerRadius: {
type: "Percent",
value: 82
},
radius: {
type: "Percent",
value: 100
},
width: {
type: "Percent",
value: 100
},
categoryField: "country"
},
properties: {
data: "#data",
labels: {
properties: {
template: {
settings: {
forceHidden: true
}
}
}
},
ticks: {
properties: {
template: {
settings: {
forceHidden: true
}
}
}
}
}
}
}
],
type: "PieChart",
settings: {
layout: "horizontal"
},
properties: {
series: ["#series"]
},
children: [
{
type: "Label",
settings: {
text: "[#5a5a5a]Total Rates[/]",
fontSize: 18,
fontWeight: "500",
textAlign: "center",
x: {
type: "Percent",
value: 25
},
y: {
type: "Percent",
value: 20
},
centerX: {
type: "Percent",
value: 50
},
paddingTop: 0,
paddingBottom: 0
}
},
{
type: "Legend",
settings: {
centerX: {
type: "Percent",
value: 50
},
x: {
type: "Percent",
value: 70
},
centerY: {
type: "Percent",
value: 50
},
y: {
type: "Percent",
value: 50
},
layout: "vertical",
marker: "circle"
},
properties: {
data: "#series.dataItems",
markerRectangles: {
properties: {
template: {
settings: {
cornerRadiusTL: 15,
cornerRadiusTR: 15,
cornerRadiusBL: 15,
cornerRadiusBR: 15
}
}
}
}
}
}
]
},
{
parent: root.container
}
);Updated CodePen:
https://codepen.io/team/amcharts/pen/MWMBVMx/344d95bb965694d8dd3fa695f00835ce?editors=0010
Related docs:
https://www.amcharts.com/docs/v5/concepts/serializing/#Templates
from amcharts5.
martynasma
commented on September 7, 2024
1
Yes, you can do so with number formatting.
Except if you want to change thousands and decimals separator symbols, you will need to do that via locale:
https://www.amcharts.com/docs/v5/concepts/locales/creating-translations/#Modifying_individual_prompts
from amcharts5.
flaming-cl
commented on September 7, 2024
Wow, @martynasma thanks for the prompt response! yeah, it solves my problem. btw, a further question:
Customize legend background color and border**
Do you think it's possible to modify the legend background color and add border left like this, using JSON config?
Applying custom formatting logic to PieChart legend values
When using JSON config, how do we set custom formatting logic to PieChart legend values?
My code I tried doesn't seem to work
am5plugins_json.JsonParser.new(root)
.parse(pieChartJson, {
parent: root.container
})
.then(function (chart) {
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
chart.series.getIndex(0).appear(1000)
chart.appear(1000, 100)
const legend = chart.children?._values?.find(
c => c.className === 'Legend'
)
legend.valueLabels.template.adapters.add('text', function (text, target) {
return text + '%'
})
})
})from amcharts5.
martynasma
commented on September 7, 2024
For background, you will need a setup function:
properties: {
data: "#series.dataItems",
itemContainers: {
properties: {
template: {
properties: {
setup: function(target) {
target.set("background", am5.Rectangle.new(root, {
fill: am5.color(0x000000),
fillOpacity: 0.3
}))
}
}
}
}
},
markerRectangles: {
properties: {
template: {
settings: {
cornerRadiusTL: 15,
cornerRadiusTR: 15,
cornerRadiusBL: 15,
cornerRadiusBR: 15
}
}
}
}
}There's no way to add a border on a single side, though.
For format, why not use in-line number formatting if all you need is to add a percent sign?
from amcharts5.
flaming-cl
commented on September 7, 2024
Hey @martynasma, thanks for the suggestions!
For format, we may add %, or may add comma separator + currency symbol + format precision (e.g. USD $123,456.78). Would you let us know if in-line number formatting also suits this need? (If so, would you give a code example for that
from amcharts5.
flaming-cl
commented on September 7, 2024
Thanks @martynasma, number formatting works for me.
1. Pie chart tooltip styles
btw, with JSON config, do you know how to set Pie chart tooltip styles? (e.g. make the tooltip background color to be grey and set the text color to be white?
The code below doesn't work:
{
"series": {
"type": "PieSeries",
"settings": {
"name": "Series",
"categoryField": "country",
"valueField": "sales",
"legendLabelText": "[bold #5a5a5a]{category}[/]",
"legendValueText": "[#5a5a5a]{value}[/]",
"innerRadius": {
"type": "Percent",
"value": 65
},
"radius": {
"type": "Percent",
"value": 80
},
"width": {
"type": "Percent",
"value": 95
},
"x": {
"type": "Percent",
"value": 60
},
"y": {
"type": "Percent",
"value": 7
},
"centerX": {
"type": "Percent",
"value": 12
}
},
"properties": {
"data": "#data",
"slices": {
"properties": {
"template": {
"settings": {
"stroke": "white",
"strokeWidth": 1
}
}
}
},
"tooltip": {
"properties": {
"template": {
"settings": {
"fill": "#000",
"labelText": "[#fff]{value}[/]"
}
}
}
}
}
}
}2. legend layout
Do you think it's possible to layout legends like this? (like setting a width for the whole legend section, and display flex + flex wrap)
from amcharts5.
flaming-cl
commented on September 7, 2024
Updated CodePen: https://codepen.io/team/amcharts/pen/MWMBVMx/344d95bb965694d8dd3fa695f00835ce?editors=0010
Many thanks @martynasma !!! btw, except setting up legend item container stroke, do you think there is another way to set gaps/margin between the item containers, use JSON config?
Screenshot from Codepen
Expected Behavior
from amcharts5.
martynasma
commented on September 7, 2024
Yes, you can use marginTop, marginRight, etc. on item container's template.
from amcharts5.
Related Issues (20)
- Chart gets stuck when hovered on the indicator lines HOT 10
- moving labels outside its parent HOT 2
- Want to change the label behavior HOT 4
- `maxPanOut` does not work with mouse wheel HOT 1
- ValueAxis pan: 'zoom' with live data HOT 1
- GaplessDateAxis weird behavior zoom out HOT 10
- Drawing is not getting extended on Lazy Loading in the new version [5.10.3] HOT 2
- Can we sync the multiple stockchart HOT 1
- Chart stock with large data HOT 5
- ValueAxis tooltip position HOT 1
- Unable to close indicators stockchart HOT 3
- Responsive chart issue HOT 1
- Erase the rounded ends of the shapes after drawing. HOT 2
- Clustered columns chart Is very slow with large data HOT 1
- Drawing event "drawingunselected" execute first HOT 11
- Unable to create Axis range in stockchart HOT 10
- XY Chart with categories not showing all categories after upgrade from 5.9.13 to 5.10.x HOT 1
- Replicating a chord diagram HOT 2
- Rangechanged event not firing as expected HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amcharts5.