Amcharts - Line Chart Overflowing Graph Container

AmCharts - Line Chart Overflowing graph container

This might be happening if you are using <base href> directive on your web page. In those cases references to masking filters in SVG do not work properly, hence lines protruding from plot area.

To avoid that simply add the global baseHref setting line to your code:

AmCharts.baseHref = true;

Please note that this must be a standalone line (not a part of chart config) and go before any of the code that creates charts.

AmCharts - How do I ensure that all of my graph values are visible in my filled line chart?

You can't control which value is in the front of the other in a filled line graph. The easy fix is to adjust your fillAlphas to a smaller value so that they're more transparent, allowing you to see the values where the filled segments overlap. You might also want to consider enabling bullets as well, as well as a chartCursor so that it's easier for the user to trigger balloons for those overlapping sections.

amCharts - baloon does not appear on line-graph

Line graphs require you either add bullets to your graph (graph.bullet = "round"; or whatever shape) or a chart cursor (chart.chartCursor = new AmCharts.ChartCursor();) for balloons to appear. Pick the method that works best for your use case.

var chartData = getData();// init wrappervar chart = new AmCharts.AmSerialChart();chart.dataProvider = chartData;chart.categoryField = "date";
// config baloonvar balloon = chart.balloon;balloon.adjustBorderColor = true;balloon.color = "#000000";balloon.cornerRadius = 5;balloon.fillColor = "#FFFFFF";
var graph = new AmCharts.AmGraph();graph.valueField = "value";graph.balloonText = "[[category]]: <b>[[value]]</b>";graph.type = "line";graph.bullet = "round";chart.addGraph(graph);
var categoryAxis = chart.categoryAxis;categoryAxis.autoGridCount = false;categoryAxis.parseDates = true;categoryAxis.gridCount = chartData.length;categoryAxis.gridPosition = "start";
var chartScrollbar = new AmCharts.ChartScrollbar();chart.addChartScrollbar(chartScrollbar);
//chart.chartCursor = new AmCharts.ChartCursor(); //alternative solution for balloons
chart.write("graphMonitor");
function getData() {  var data = [];  var firstDate = new Date();  var newDate;  firstDate.setDate(firstDate.getDate() - 10);  for (var i = 0; i < 10; ++i) {    newDate = new Date(firstDate);    newDate.setDate(i);    data.push({      "date": newDate,       "value": Math.floor(Math.random() * 20 + 10)    });  }  return data;}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script><script src="//www.amcharts.com/lib/3/serial.js"></script><div id="graphMonitor" style="width: 100%; height: 300px"></div>

AmCharts/JSF - Invalid data shown in Line Graph after push

Oh,i've got it

the problem is in function hanleGlobalPushEvent in chartData object

data = [
    {
        "date" : eventData.label,
        "value" : eventData.value
    }];

it is definition of array,but chart data is simle object with two values

it should be like this

data = 
    {
        "date" : eventData.label,
        "value" : eventData.value
    };

Amcharts graph - Rotate chart to horizontal at lesser screen-width

the url to responsive.min.js is not correct. Try to add a correct one then it should work. Here the working fiddle: https://jsfiddle.net/fvurj0xg/1/

AmCharts - using connect:false by skipping null values for multi-line graph

Any points with null/undefined values will create a gap when connect is set to false, regardless of whether the next point after that falls within the gapPeriod, as null/undefined values are considered as an explicit gap in your data. You want to set connect to true and enable forceGap in your graphs. Note that you'll likely want to adjust your gapPeriod as it the gap triggers when your data is >= to minPeriod * gapPeriod.

var chart = AmCharts.makeChart("chartdiv", {  "type": "serial",  "theme": "light",  "dataProvider": [{      "date": "2017-07-15 01:01:01",      "value1": "12",    }, {      "date": "2017-07-15 01:01:41",      "value2": "20"    }, {      "date": "2017-07-15 01:02:01",      "value1": "12",    }, {      "date": "2017-07-15 01:02:41",      "value2": "20",    }, {      "date": "2017-07-15 01:03:51",      "value1": "12",      "value2": "20",    }, {      "date": "2017-07-15 01:04:31",      "value1": "12",      "value2": "20"    },    {      "date": "2017-07-15 01:04:41",      "value1": "12"    }, {      "date": "2017-07-15 01:04:51",      "value1": "12"    }, {      "date": "2017-07-15 01:05:01",      "value1": "12"    }, {      "date": "2017-07-15 01:05:11",      "value1": "12",      "value2": "20"    }  ],  "startDuration": 1,  "graphs": [{    "valueField": "value1",    "bullet": "round",    "gapPeriod": 61,    "forceGap": true  }, {    "valueField": "value2",    "bullet": "square",    "gapPeriod": 61,    "forceGap": true  }],  "dataDateFormat": "YYYY-MM-DD JJ:NN:SS",  "categoryField": "date",  "categoryAxis": {    "parseDates": true,    "minPeriod": "ss"  }});

#chartdiv {  width: 100%;  height: 300px;}

<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/themes/light.js"></script><div id="chartdiv"></div>

Amcharts 5 remove y axis

Try replacing:

var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
  renderer: am5xy.AxisRendererY.new(rootA, {})
}));

With this:

var yRenderer = am5xy.AxisRendererY.new(rootA, {})
yRenderer.labels.template.set('visible', false)

var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
  renderer: yRenderer
}));

AmXYChart - How to add padding to prevent hidden overflows

There isn't a way to pad this without modifying your minimum and maximum to be further outside your 0-100 range to accommodate. Since you're using a labelFunction, you can set it up so that you don't display any labels above and below 0-100% if you want, for example:

labelFunction: (e, val) => { return (val > 100 || val < 0 ? "" : val + "%"); }

Demo below using -10 as a minimum and 110 as a maximum:

var data = [{"rate": 99, "customers": 2421},{"rate": 76,"customers": 100},{"rate": 68,"customers": 1711},{"rate": 38,"customers": 313},{"rate": 94,"customers": 393},{"rate": 57,"customers": 946},{"rate": 99,"customers": 1772},{"rate": 20,"customers": 2168},{"rate": 100,"customers": 754},{"rate": 40,"customers": 121},{"rate": 51,"customers": 2412},{"rate": 15,"customers": 2364},{"rate": 32,"customers": 2161},{"rate": 55,"customers": 1506},{"rate": 29,"customers": 986},{"rate": 0,"customers": 698},{"rate": 4,"customers": 1285},{"rate": 22,"customers": 2108},{"rate": 17,"customers": 2081},{"rate": 79,"customers": 251},{"rate": 48,"customers": 258},{"rate": 41,"customers": 1541},{"rate": 35,"customers": 1132},{"rate": 86,"customers": 1213},{"rate": 1,"customers": 1936},{"rate": 51,"customers": 1737},{"rate": 5,"customers": 2447},{"rate": 60,"customers": 305},{"rate": 37,"customers": 776},{"rate": 64,"customers": 886}];
var chart = AmCharts.makeChart("chartdiv", {  type: 'xy',  addClassNames: true,  autoMargins: false,  marginLeft: 67,  marginBottom: 55,  graphs: [{    //balloonFunction,    bullet: 'round',    xField: 'customers',    yField: 'rate',    bulletSize: 16,    lineAlpha: 0, //for testing only    lineColorField: 'color',  }],  valueAxes: [    {      title: "Rate (%)",      borderThickness: 0,      axisThickness: 2,      maximum: 110,      minimum: -10,      labelFunction: (e,val) => { return (val > 100 || val < 0 ? "" : val + "%"); },    },    {      title: "Customers",      position: 'bottom',      axisAlpha: 0,      borderThickness: 0,      axisThickness: 0,      gridThickness: 0,    },  ],  dataProvider: data,});

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script><script type="text/javascript" src="//www.amcharts.com/lib/3/xy.js"></script><div id="chartdiv" style="width: 100%; height: 300px;"></div>

---

Related Topics