I am creating a sparkline chart using Amcharts 3 version. Here is my code
<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>
#chartdiv {
width: 100%;
height: 500px;
background-color: grey;
}
<script>
AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [
{
"value_at_timestamp": 1539176030,
"value_at": "2018-10-10 12:54:05",
"value": 118766,
"precision": 3,
"display_value": 118.766,
"updated_at": "2018-10-10 15:09:06",
"bullet": "round"
},
{
"value_at_timestamp": 1539176945,
"value_at": "2018-10-10 13:09:05",
"value": 471954,
"precision": 3,
"display_value": 471.954,
"updated_at": "2018-10-10 15:09:06",
"bullet": "round"
},
{
"value_at_timestamp": 1539177845,
"value_at": "2018-10-10 13:24:05",
"value": 724007,
"precision": 3,
"display_value": 724.007,
"updated_at": "2018-10-10 15:09:06",
"bullet": "round"
},
{
"value_at_timestamp": 1539178745,
"value_at": "2018-10-10 13:39:05",
"value": 632491,
"precision": 3,
"display_value": 632.491,
"updated_at": "2018-10-10 15:09:06",
"bullet": "round"
},
{
"value_at_timestamp": 1539179645,
"value_at": "2018-10-10 13:54:05",
"value": 446953,
"precision": 3,
"display_value": 446.953,
"updated_at": "2018-10-10 15:09:06",
"bullet": "round"
},
{
"value_at_timestamp": 1539180545,
"value_at": "2018-10-10 14:09:05",
"value": 782412,
"precision": 3,
"display_value": 782.412,
"updated_at": "2018-10-10 15:09:05",
"bullet": "round"
},
{
"value_at_timestamp": 1539181445,
"value_at": "2018-10-10 14:24:05",
"value": 346533,
"precision": 3,
"display_value": 346.533,
"updated_at": "2018-10-10 15:09:05",
"bullet": "round"
},
{
"value_at_timestamp": 1539182345,
"value_at": "2018-10-10 14:39:05",
"value": 128011,
"precision": 3,
"display_value": 128.011,
"updated_at": "2018-10-10 15:09:05",
"bullet": "round"
},
{
"value_at_timestamp": 1539183245,
"value_at": "2018-10-10 14:54:05",
"value": 800151,
"precision": 3,
"display_value": 800.151,
"updated_at": "2018-10-10 15:09:05",
"bullet": "round"
},
{
"value_at_timestamp": 1539184145,
"value_at": "2018-10-10 15:09:05",
"value": 668592,
"precision": 3,
"display_value": 668.592,
"updated_at": "2018-10-10 15:09:05",
"bullet": "round"
}
],
"categoryField": "value_at",
"autoMargins": false,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"marginBottom": 0,
"graphs": [
{
"id": "g1",
"valueField": "display_value",
"bulletField": "bullet",
"lineColor": "#7c287e",
"bulletSize": 1,
"fillAlphas": 0.3
}
],
"valueAxes": [
{
"gridAlpha": 0,
"axisAlpha": 0
}
],
"categoryAxis": {
"gridAlpha": 0,
"axisAlpha": 0
},
"chartCursor": {
"limitToGraph": "g1"
}
} );
</script>
Live url https://codepen.io/anon/pen/VEbzLd
The sparkline chart isn't taking the full width full grey area. My question is how can I make the sparkline chart to stretch the full grey area.
Thanks for reading my question & helping me.
By default the category axis doesn't plot points at the very beginning and end of the axis. You can override this behavior by setting startOnAxis to true in your categoryAxis to make the chart plot the points at the extreme ends of the axis, taking up the full width:
"categoryAxis": {
// ...
"startOnAxis": true,
// ...
}