I have a Funnel chart from https://www.amcharts.com/demos/funnel-chart/?theme=none. It works fine.
I would like to set a fixed height for the segments, but I don't know how.
There isn't a way to set fixed height segments directly in the config, but you can fake it using your data by setting fake values for the area/height of the segments but display the real values in a separate property in your balloonText and labelText, for example:
"dataProvider": [ {
"title": "Website visits",
"areaValue": 30, //value used for segment height/area
"realValue": 300
}, {
"title": "Downloads",
"areaValue": 30,
"realValue": 123
}, // ...
],
// ...
"valueField": "areaValue", //use the area value for visual purposes
"balloonText": "[[title]]:<b>[[realValue]]</b>", //reference the actual value through the realValue
"labelText": "[[title]]: [[realValue]]",
Demo below with segments with identical height:
var chart = AmCharts.makeChart("chartdiv", {
"type": "funnel",
"theme": "none",
"dataProvider": [{
"title": "Website visits",
"areaValue": 30,
"realValue": 300
}, {
"title": "Downloads",
"areaValue": 30,
"realValue": 123
}, {
"title": "Requested prices",
"areaValue": 30,
"realValue": 98
}, {
"title": "Contacted",
"areaValue": 30,
"realValue": 72
}, {
"title": "Purchased",
"areaValue": 30,
"realValue": 35
}, {
"title": "Asked for support",
"areaValue": 30,
"realValue": 25
}, {
"title": "Purchased more",
"areaValue": 30,
"realValue": 18
}],
"titleField": "title",
"marginRight": 160,
"marginLeft": 15,
"labelPosition": "right",
"funnelAlpha": 0.9,
"valueField": "areaValue",
"balloonText": "[[title]]:<b>[[realValue]]</b>",
"labelText": "[[title]]: [[realValue]]",
"startX": 0,
"neckWidth": "40%",
"startAlpha": 0,
"outlineThickness": 1,
"neckHeight": "30%",
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/funnel.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
Related
I have the following chart:
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"colorField": "color",
"series": [{
"type": "PieSeries",
"alignLabels": false,
"ticks": {
"disabled": true
},
"labels": {
"radius": "-40%",
"fill": "white"
}
}],
"dataProvider": [{
"title": "Yes",
"value": 3,
"color": "#6bbdb9"
},
{
"title": "No",
"value": 2,
"color": "#2f2f2f"
}
],
"titleField": "title",
"valueField": "value",
"labelRadius": 5,
"radius": "42%",
"innerRadius": "60%",
"labelText": "[[title]]",
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/responsive/responsive.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv"></div>
I have two items I want to resolve:
I want the "Yes" and "No" labels to sit inside rather the slices, rather than be outside. From the V4 docs, I have tried this approach:
"series": [ {
"type": "PieSeries",
"alignLabels": false,
"ticks": {
"disabled": true
},
"labels": {
"text": "{value.percent.formatNumber('#.0')}%",
"radius": "-40%",
"fill": "white"
}
}]
But this approach doesn't work for me in V3 (does nothing).
When you click a slice, it animates the slice outwards, I want, on click, for it to do nothing. Can't find anything on the docs about this?
Any ideas?
A lot of what you're looking for is in the aptly named Version 3 documentation; I'm not sure why you were poking around in the version 4 documentation.
That said, to move the labels inside, you need to set a negative labelRadius as demonstrated here:
AmCharts.makeChart("...", {
// ...
labelRadius: -35, //adjust as needed
// ...
});
To disable the pull out on click, set pullOutRadius to 0.
AmCharts.makeChart("...", {
// ...
pullOutRadius: 0,
// ...
});
Demo below:
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"colorField": "color",
"dataProvider": [{
"title": "Yes",
"value": 3,
"color": "#6bbdb9"
},
{
"title": "No",
"value": 2,
"color": "#2f2f2f"
}
],
"titleField": "title",
"valueField": "value",
"labelRadius": -35,
"radius": "42%",
"innerRadius": "60%",
"labelText": "[[title]]",
"color": "#ffffff",
"pullOutRadius": 0,
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/responsive/responsive.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv"></div>
I'm trying to put a image to the beginning of a trend line using the initialImage property of the trendline. But it doesn't come up to the beginning of the trend line.
Here is the code:
"trendLines": [ {
"initialDate": "2017-10-26 18:52:13",
"initialValue": 0,
"lineColor": "#CC0000",
"initialImage": {
"svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
"color": "#050",
"width": 13,
"height": 13,
"rotation": 90,
"offsetX": 4,
"offsetY": -17,
"balloonText": "2017-10-26 11:52:43"
},
"finalDate": "2017-10-26 18:52:13",
"finalValue": 80
}],
Here is the DEMO.
initialImage is placed at the location defined by initialValue and initialDate, so it actually is being placed at the beginning. In your case, the beginning is at the bottom due to your initial values with respect to the final values. If you want it to appear on top of that particular trendline, set it as the finalImage instead.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop": 0,
"marginRight": 80,
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"dataProvider": [{
"year": "2017-10-26 18:45:13",
"value": 80
}, {
"year": "2017-10-26 18:46:13",
"value": 2
}, {
"year": "2017-10-26 18:47:13",
"value": 46
}, {
"year": "2017-10-26 18:48:13",
"value": 22
}, {
"year": "2017-10-26 18:49:13",
"value": 50
}, {
"year": "2017-10-26 18:50:13",
"value": 24
}, {
"year": "2017-10-26 18:51:13",
"value": 7
}, {
"year": "2017-10-26 18:52:13",
"value": 5
}, {
"year": "2017-10-26 18:53:13",
"value": 47
}, {
"year": "2017-10-26 18:54:13",
"value": 35
}],
"valueAxes": [{
"axisAlpha": 0,
"guides": [{
"fillAlpha": 0.1,
"fillColor": "#888888",
"lineAlpha": 0,
"toValue": 16,
"value": 10
}],
"position": "left",
"tickLength": 0
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
"bullet": "round",
"dashLength": 3,
"colorField":"color",
"valueField": "value"
}],
"trendLines": [ {
"initialDate": "2017-10-26 18:52:13",
"initialValue": 0,
"lineColor": "#CC0000",
"finalImage": {
"svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
"color": "#050",
"width": 13,
"height": 13,
"rotation": 90,
"offsetX": 4,
"offsetY": -17,
"balloonText": "2017-10-26 11:52:43"
},
"finalDate": "2017-10-26 18:52:13",
"finalValue": 80
}],
"categoryField": "year",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
"minorGridAlpha": 0.1,
"minorGridEnabled": true,
"minPeriod": "fff"
}
});
/*
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
chart.zoomChart();
}
function zoomChart(){
chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}*/
#chartdiv {
width : 100%;
height : 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
I'm using AmChart do display my chart with the information from my server.
If you run the code and scroll down and hover the chart it will display (Aug 01, 2012 OR Sep 01, 2012 OR Oct 01, 2012)
I'cant seem to find a way to change the value so it only display the month (Aug OR Sep OR Oct)
Does anyome know how to fix that?
var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 60,
"marginButtom": 70,
"autoMarginOffset": 20,
"dataDateFormat": "YYYY-MM",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"allLabels": [{
"text": "Index / mio",
"bold": true,
"x": 20,
"y": height,
"rotation": "270"
}, {
"text": "Index / mio",
"bold": true,
"x": width / 1.2,
"y": (height * 2) - 20
}],
"graphs": [{
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:10px;'>[[value]]</span>"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": [{
"date": "2012-08",
"value": 13
}, {
"date": "2012-09",
"value": 22
}, {
"date": "2012-10",
"value": 23
}]
});
#chartdiv {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
You can modify the format string in the chartCursor's categoryBalloonDateFormat property to "MMM" instead of the default "MMM DD, YYYY".
"chartCursor": {
"categoryBalloonDateFormat": "MMM",
// ...
}
Updated demo below:
var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginLeft": 60,
"marginButtom": 70,
"autoMarginOffset": 20,
"dataDateFormat": "YYYY-MM",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"allLabels": [{
"text": "Index / mio",
"bold": true,
"x": 20,
"y": height,
"rotation": "270"
}, {
"text": "Index / mio",
"bold": true,
"x": width / 1.2,
"y": (height * 2) - 20
}],
"graphs": [{
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff",
},
"labelText": "[[category]]",
"labelPosition": "bottom",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:10px;'>[[value]]</span>"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"categoryBalloonDateFormat": "MMM"
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": [{
"date": "2012-08",
"value": 13
}, {
"date": "2012-09",
"value": 22
}, {
"date": "2012-10",
"value": 23
}]
});
#chartdiv {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
I created a simple graph with amcharts and set a title.
Is it possible to change its position? In my case I want the title to be on the left of the graph, maybe even in an angle of 90 degree:
This is an extract of the code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
//..
, "titles": [{
"text": "My Chart Title"
}, {
"text": "My Chart Sub-Title",
"bold": false
}]
});
Here is a fiddle.
Why don't you just use label functionality instead?
Contrary to titles, labels can be any text placed anywhere in the chart area, rotated, etc.
"allLabels": [{
"text": "My Chart Title",
"bold": true,
"x": 10,
"y": "50%",
"rotation": 270,
"width": "100%",
"align": "middle"
}, {
"text": "My Chart Sub-Title",
"bold": false,
"x": 30,
"y": "50%",
"rotation": 270,
"width": "100%",
"align": "middle"
}]
The only downside is that you will need to manually adjust chart's margins to accommodate for them. The chart does not auto-adjust margins as with titles.
Since you want the labels on the left side, the same as value axis, setting marginLeft will be ignored because the axis will try to auto-calculate the margin needed for the axis' labels. (not counting in the labels)
To fix that set ignoreAxisWidth on the value axis to true.
Here's your Fiddle updated.
As said #Lara_Belle you can modify this with css hack.
You can add css transform for move your text. I used nth-child for assign css on subtitle. Please try below.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}, "titles": [{
"text": "My Chart Title"
}, {
"text": "My Chart Sub-Title",
"bold": false
}]
});
#chartdiv {
width: 100%;
height: 500px;
}
.amcharts-export-menu-top-right {
top: 10px;
right: 0;
}
text{
margin: 50px;
}
.amcharts-title{
transform: translate(145px,30px)
}
.amcharts-title:nth-child(2){
transform: translate(134px, 10px)
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
UPADATE
You can just modify the transform property.
ex:
.amcharts-title{
transform: translate(145px,30px)
}
.amcharts-title:nth-child(2){
transform: translate(134px, 10px)
}
Please try now
With these basic options, this chart is feeling cramped — the 'U.S. Average' plotline label is overlapping the first bar.
Is there a way to add padding to the top and bottom of the plot area, thereby giving a little breathing room for the plotline & its label?
JSFiddle of the problem
Plotline code:
Highcharts.setOptions({
chart: {
style: {
fontFamily: "Oswald, sans-serif",
textTransform: "uppercase"
}
}
});
var chart = new Highcharts.Chart({
"credits": {
"enabled": false
},
"chart": {
"renderTo": "container",
"type": "bar"
},
"title": {
"text": "Percent of Adults Who Binge Drank"
},
"subtitle": {
"text": "2013 | Percent of Adults Who Binge Drank"
},
"xAxis": {
"categories": ["Boston", "Denver", "Miami", "New York", "Phoenix", "San Antonio", "San Jose", "Seattle", "Washington"],
"labels": {
"useHTML": true,
"style": {
"width": "100px",
"min-width": "100px",
"text-align": "right"
}
}
},
"yAxis": {
"title": {
"text": null
},
"plotLines": [{
"color": "#9b9b9b",
"dashStyle": "shortdot",
"value": 26,
"width": 2,
"label": {
"text": "U.S. Average",
"align": "left",
"x": 5,
"rotation": 0,
"zIndex": 1000,
"useHTML": true,
"style": {
"font-size": "10px",
"background-color": "#fff"
}
}
}]
},
"series": [{
"data": [35, 26, 18, 18, 15, 21, 55, 19, 22],
"color": "#e12922"
}],
"exporting": {
"enabled": true,
"buttons": {
"contextButton": {
"menuItems": "buttons"
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:400px;width:600px;margin:1.5em 1em;"></div>