Using rotated labels on category X axis. (Real graph uses long names but results are the same.)
A: Alignment of axis labels and their data points is fine without label rotation.
B: Labels are not aligned when rotated.
The only difference between A and B graph coding is the addition of "labels":{"rotation":90} in the xAxes renderer.
How can alignment be fixed?
var chart =am4core.createFromConfig({
"colors": { "list": ["#DB3", "#000", "#888"] },
"data": [$data],
"legend": { "markers":{"width":20, "height":10},
"position":"top",
"useDefaultMarker":true
},
"series": [
{ "dataFields": { "categoryX":"X", "valueY":"Y1" },
"name": "[font-size:16px;font-weight:600;]{$n1}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y2" },
"name": "[font-size:16px;font-weight:600;]{$n2}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y3" },
"name": "[font-size:16px;font-weight:600;]others[/]",
"strokeWidth": 2,
"type": "LineSeries"
}
],
"xAxes": [
{ "dataFields": { "category": "X" },
"renderer": { "minGridDistance":11, "labels":{"rotation":90}},
"type": "CategoryAxis"
}
],
"yAxes": [
{ "renderer": {"minGridDistance":15},
"title": {"text": "[font-size:16px;font-weight:600;]Values[/]"},
"type": "ValueAxis"
}]
}, "line", am4charts.XYChart);
LABELS renderer needed "verticalCenter":"middle" with rotation.
I don't know how many other things I tried!
Related
How can I change the title of a loaded chart using javascript? The following doesn't work with external data
https://codepen.io/abdfahim/pen/zYOPvPx
var chart = am4core.createFromConfig({
"titles": [
{
"text": "ABCD",
"fontSize": 25,
"marginBottom": 10
}
],
"dataSource": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json"
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "year"
}
}
],
"yAxes": [
{
"type": "ValueAxis"
}
],
"series": [
{
"type": "ColumnSeries",
"name": "Cars",
"dataFields": {
"categoryX": "year",
"valueY": "cars"
}
}
]
}, "chartdiv", am4charts.XYChart);
function changeTitle()
{
chart.titles[0].text = "New Title";
}
AmCharts v4 uses lists for the majority of its array-like objects, so using subscripts will not work. It's recommended to use the accessor methods provided by the list to get at the object you want to change, such as getIndex:
chart.titles.getIndex(0).title = "New title"
Updated codepen
Just in case some one will hit my same issue, I found this solution working for me
chart.titles.getIndex(0).text = "new title";
this is particularly handy if you are going to refresh the chart each x seconds
I'm trying to create a pie chart with a custom set of colours using Am4Charts and the createFromConfig method.
I've followed the tutorial here but the chart keeps appearing with it's default color set.
Here is a sample of the JSON I've tried:
"innerRadius": 100,
"colors": {"list": ["#ff0000", "#00ff00", "#0000ff" ]},
"data": {
"0": {
"pot": "Within 8 days",
"value": "£111,119.70",
},
"1": {
"pot": "9 - 17 days",
"value": "£225,537.73"
},
"2": {
"pot": "18+ days",
"value": "£720,279.85"
}
},
"legend": [],
"xAxes": [
{
"type": "CategoryAxis",
"title": {
"text": "pot"
},
"dataFields": {
"category": "pot",
"title": {
"text": "Month"
}
},
"renderer": {
"labels": {
"rotation": 190,
"verticalCenter": "middle",
"horizontalCenter": "left"
}
}
}
],
"series": [
{
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
},
"ticks": {
"disabled": true
},
"labels": {
"disabled": true
},
}
],
Can somebody see where I've gone wrong?
Update 2:
Fixed in 4.0.0-beta.85.
Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.
Update 1:
Response from amchart contributor/CTO Martynas Majeris (https://github.com/martynasma):
Looks like there are two issues: documentation is wrong and there's a bug that prevents it from working :)
I updated the docs. It should say this:
{
// ...
"series": [{
// ...
"colors": {
"list": [
"#845EC2",
"#D65DB1",
"#FF6F91",
"#FF9671",
"#FFC75F",
"#F9F871"
]
}
}]
}
Also, fixed bug in dev version. New version will be released within 1-2 days.
Original
This might be a bug and I have opened an issue on amchart github. I will update this once I get a response: https://github.com/amcharts/amcharts4/issues/577
By the way, I do think your configuration JSON has couple issues:
data is an array, not an object
legend is an object, not an array
This is what I used to create the pie chart demo for the opened issue:
// Create chart instance in one go
let chart = am4core.createFromConfig({
"colors": {
"list": ["#ff0000","#00ff00", "#0000ff"]
},
// Create pie series
"series": [{
"colors": ["#ff0000","#00ff00", "#0000ff"],
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
}
}],
// Add data
"data": [{
"pot": "Within 8 days",
"value": "£111,119.70"
}, {
"pot": "9 - 17 days",
"value": "£225,537.73"
}, {
"pot": "18+ days",
"value": "£720,279.85"
}],
// Add legend
"legend": {},
"innerRadius": 100
}, "chart", am4charts.PieChart);
D3 newbie.
How I adjust the spacing between bars in vega-lite bar chart and override the default? binSpacing I think only works on histograms. See code below.
I'll want to adjust colour of text and font family too... But am having trouble finding it in the docs.
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 1200,
"height": 900,
"data": {
"url": "data/seattle-weather.csv"
},
"mark": "bar",
"encoding": {
"x": {
"aggregate": "count",
"type": "quantitative"
},
"size": {
"value": 40
},
"y": {
"field": "date",
"type": "temporal",
"timeUnit": "month",
"axis": {
"title": "Regions"
}
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": [
"0-20 days",
"21-27 days",
">28 days"
],
"range": [
"red",
"orange",
"green"
]
},
"legend": {
"title": "Case Ageing"
}
}
}
}
I can understand your confusion. It seems there are three questions:
How do I change bin width for histograms? This is documented here. If you have trouble with a reproducible example, I will be happy to help.
How do I adjust the spacing of the bars? This is controlled by padding, paddingInner and paddingOuter all documented at the encoding level and at the config level. You might be having trouble since you are setting size manually with "size": {"value": 40}, but I am guessing this is a remnant from experimenting. Here is a working spec from this gist. You can play with paddingOuter, paddingInner, or add padding to apply to both inner and outer.
How do I change font styling? See this gist.
While amcharts shows the India map correctly (showing the disputed regions as part of India) when displaying only India (http://jsfiddle.net/zxhseguw/5/)
"dataProvider": {
"map": "indiaLow",
"areas": [ {
"id": "IN-KA",
"value": 4447100,
}, {
"id": "IN-UP",
"value": 38763
}]
},
it shades it differently when rendering it on world map (http://jsfiddle.net/zxhseguw/6/)
"dataProvider": {
"map": "worldLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
I wonder, if there is a way to make it render India correctly, just like its possible in Google Charts by setting origin='India'
I'm assuming you're referring to the region around Kashmir, correct? Try using worldIndiaLow instead of worldLow, which includes more of that disputed area as part of India.
"dataProvider": {
"map": "worldIndiaLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
Updated fiddle
I want to plot a graph between place and time. Y-axis will show 5 countries (USA, UK, Canada, France, Germany) and X-axis will show the time. The data is in pairs of (date, place). I am trying to display it by replacing the numeric values of Y-Y-axis with strings but no luck. Any simple working example will be helpful.
The value axis' labelFunction would be perfect for this task. With it, you can define a custom function that would be called for each label, which in turn could replace the number with a string. I.e.:
"valueAxes": [{
// other value axis settings
// ...
"labelFunction": function(value) {
var labels = {
"1": "USA",
"2": "UK",
"3": "Canada",
"4": "France",
"5": "Germany"
};
return labels[value] || "";
}
}]
Another option that you have is to disable value axis labels altogether ("labelsEnabled": false) and using guides to place country labels at specific values. I.e.:
"valueAxes": [{
"labelsEnabled": false,
"guides": [{
"value": 1,
"label": "USA"
}, {
"value": 2,
"label": "UK"
}, {
"value": 3,
"label": "Canada"
}, {
"value": 4,
"label": "France"
}, {
"value": 5,
"label": "Germany"
}]
}]
Whichever works for your purposes better, or seems easier.