CODEWITHSUNDEEP
reactjschartsamchartsamcharts4
Frosted Cupcake
Frosted Cupcake

Reputation: 1970

Prevent clipping of bullets at extreme ends in AmChart

I have taken the below code from the official documentation of AmChart and added the bullets on it.

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.colors.step = 2;

// Add data
chart.data = [{
  "year": "1995",
  "cars": 1567,
  "motorcycles": 683,
  "bicycles": 146
}, {
  "year": "1996",
  "cars": 1617,
  "motorcycles": 691,
  "bicycles": 138
}, {
  "year": "1997",
  "cars": 1630,
  "motorcycles": 642,
  "bicycles": 127
}, {
  "year": "1998",
  "cars": 1660,
  "motorcycles": 699,
  "bicycles": 105
}, {
  "year": "1999",
  "cars": 1683,
  "motorcycles": 721,
  "bicycles": 109
}, {
  "year": "2000",
  "cars": 1691,
  "motorcycles": 737,
  "bicycles": 112
}, {
  "year": "2001",
  "cars": 1298,
  "motorcycles": 680,
  "bicycles": 101
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.title.text = "Year";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;

categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;


var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Percent";
valueAxis.calculateTotals = true;
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.renderer.labels.template.adapter.add("text", function(text) {
  return text + "%";
});

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "cars";
series.dataFields.valueYShow = "totalPercent";
series.dataFields.categoryX = "year";
series.name = "Cars";

series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#FFF");

series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;

series.fillOpacity = 0.85;
series.stacked = true;

// static
series.legendSettings.labelText = "Cars total:";
series.legendSettings.valueText = "{valueY.close}";

// hovering
series.legendSettings.itemLabelText = "Cars:";
series.legendSettings.itemValueText = "{valueY}";

var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "motorcycles";
series2.dataFields.valueYShow = "totalPercent";
series2.dataFields.categoryX = "year";
series2.name = "Motorcycles";

series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series2.tooltip.getFillFromObject = false;
series2.tooltip.background.fill = am4core.color("#FFF");

series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;

series2.fillOpacity = 0.85;
series2.stacked = true;

// static
series2.legendSettings.labelText = "Motorcycles total:";
series2.legendSettings.valueText = "{valueY.close}";

// hovering
series2.legendSettings.itemLabelText = "Motorcycles:";
series2.legendSettings.itemValueText = "{valueY}";

var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "bicycles";
series3.dataFields.valueYShow = "totalPercent";
series3.dataFields.categoryX = "year";
series3.name = "Bicycles";
series3.tooltipText = "{name}: [bold]{valueY}[/]";

series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color("#FFF");

series3.tooltip.getStrokeFromObject = true;
series3.tooltip.background.strokeWidth = 3;

series3.fillOpacity = 0.85;
series3.stacked = true;

// static
series3.legendSettings.labelText = "Bicycles total:";
series3.legendSettings.valueText = "{valueY.close}";

// hovering
series3.legendSettings.itemLabelText = "Bicycles:";
series3.legendSettings.itemValueText = "{valueY}";

// For adding bullets on the chart
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color('#fff');
bullet.circle.strokeWidth = 1;
bullet.circle.radius = 10;
bullet.circle.opacity = 1;
bullet.circle.locationX = 0.6;

// Add cursor
chart.cursor = new am4charts.XYCursor();

// add legend
chart.legend = new am4charts.Legend();

The chart generated by the above code looks like below,

enter image description here

The leftmost and rightmost bullets are getting clipped off, how can I prevent that from happening. Shifting categoryAxis.startLocation and categoryAxis.endLocation solves the issue but it shifts the entire axis also, is there any other way to prevent the clipping of bullets?

Upvotes: 2

Views: 923

Answers (2)

xorspark
xorspark

Reputation: 16012

If you want to prevent the bullets from getting clipped, set maskBullets to false in the chart object, as documented here

chart.maskBullets = false;

Demo below:

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.colors.step = 2;
chart.maskBullets = false;

// Add data
chart.data = [{
  "year": "1995",
  "cars": 1567,
  "motorcycles": 683,
  "bicycles": 146
}, {
  "year": "1996",
  "cars": 1617,
  "motorcycles": 691,
  "bicycles": 138
}, {
  "year": "1997",
  "cars": 1630,
  "motorcycles": 642,
  "bicycles": 127
}, {
  "year": "1998",
  "cars": 1660,
  "motorcycles": 699,
  "bicycles": 105
}, {
  "year": "1999",
  "cars": 1683,
  "motorcycles": 721,
  "bicycles": 109
}, {
  "year": "2000",
  "cars": 1691,
  "motorcycles": 737,
  "bicycles": 112
}, {
  "year": "2001",
  "cars": 1298,
  "motorcycles": 680,
  "bicycles": 101
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.title.text = "Year";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;

categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;


var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Percent";
valueAxis.calculateTotals = true;
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.renderer.labels.template.adapter.add("text", function(text) {
  return text + "%";
});

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "cars";
series.dataFields.valueYShow = "totalPercent";
series.dataFields.categoryX = "year";
series.name = "Cars";

series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#FFF");

series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;

series.fillOpacity = 0.85;
series.stacked = true;

// static
series.legendSettings.labelText = "Cars total:";
series.legendSettings.valueText = "{valueY.close}";

// hovering
series.legendSettings.itemLabelText = "Cars:";
series.legendSettings.itemValueText = "{valueY}";

var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "motorcycles";
series2.dataFields.valueYShow = "totalPercent";
series2.dataFields.categoryX = "year";
series2.name = "Motorcycles";

series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series2.tooltip.getFillFromObject = false;
series2.tooltip.background.fill = am4core.color("#FFF");

series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;

series2.fillOpacity = 0.85;
series2.stacked = true;

// static
series2.legendSettings.labelText = "Motorcycles total:";
series2.legendSettings.valueText = "{valueY.close}";

// hovering
series2.legendSettings.itemLabelText = "Motorcycles:";
series2.legendSettings.itemValueText = "{valueY}";

var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "bicycles";
series3.dataFields.valueYShow = "totalPercent";
series3.dataFields.categoryX = "year";
series3.name = "Bicycles";
series3.tooltipText = "{name}: [bold]{valueY}[/]";

series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color("#FFF");

series3.tooltip.getStrokeFromObject = true;
series3.tooltip.background.strokeWidth = 3;

series3.fillOpacity = 0.85;
series3.stacked = true;

// static
series3.legendSettings.labelText = "Bicycles total:";
series3.legendSettings.valueText = "{valueY.close}";

// hovering
series3.legendSettings.itemLabelText = "Bicycles:";
series3.legendSettings.itemValueText = "{valueY}";

// For adding bullets on the chart
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color('#fff');
bullet.circle.strokeWidth = 1;
bullet.circle.radius = 10;
bullet.circle.opacity = 1;
bullet.circle.locationX = 0.6;

// Add cursor
chart.cursor = new am4charts.XYCursor();

// add legend
chart.legend = new am4charts.Legend();
#chartdiv {
width: 100%; 
height: 500px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

Upvotes: 3

WhiteHat
WhiteHat

Reputation: 61212

I think you want to remove startLocation & endLocation altogether.
this will allow the point to fully display.

see following working snippet...

$(document).ready(function() {
  // Create chart instance
  var chart = am4core.create("chart", am4charts.XYChart);
  chart.colors.step = 2;

  // Add data
  chart.data = [{
    "year": "1995",
    "cars": 1567,
    "motorcycles": 683,
    "bicycles": 146
  }, {
    "year": "1996",
    "cars": 1617,
    "motorcycles": 691,
    "bicycles": 138
  }, {
    "year": "1997",
    "cars": 1630,
    "motorcycles": 642,
    "bicycles": 127
  }, {
    "year": "1998",
    "cars": 1660,
    "motorcycles": 699,
    "bicycles": 105
  }, {
    "year": "1999",
    "cars": 1683,
    "motorcycles": 721,
    "bicycles": 109
  }, {
    "year": "2000",
    "cars": 1691,
    "motorcycles": 737,
    "bicycles": 112
  }, {
    "year": "2001",
    "cars": 1298,
    "motorcycles": 680,
    "bicycles": 101
  }];

  // Create axes
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "year";
  categoryAxis.title.text = "Year";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 20;

  var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.title.text = "Percent";
  valueAxis.calculateTotals = true;
  valueAxis.min = 0;
  valueAxis.max = 100;
  valueAxis.strictMinMax = true;
  valueAxis.renderer.labels.template.adapter.add("text", function(text) {
    return text + "%";
  });

  // Create series
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = "cars";
  series.dataFields.valueYShow = "totalPercent";
  series.dataFields.categoryX = "year";
  series.name = "Cars";

  series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

  series.tooltip.getFillFromObject = false;
  series.tooltip.background.fill = am4core.color("#FFF");

  series.tooltip.getStrokeFromObject = true;
  series.tooltip.background.strokeWidth = 3;

  series.fillOpacity = 0.85;
  series.stacked = true;

  // static
  series.legendSettings.labelText = "Cars total:";
  series.legendSettings.valueText = "{valueY.close}";

  // hovering
  series.legendSettings.itemLabelText = "Cars:";
  series.legendSettings.itemValueText = "{valueY}";

  var series2 = chart.series.push(new am4charts.LineSeries());
  series2.dataFields.valueY = "motorcycles";
  series2.dataFields.valueYShow = "totalPercent";
  series2.dataFields.categoryX = "year";
  series2.name = "Motorcycles";

  series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

  series2.tooltip.getFillFromObject = false;
  series2.tooltip.background.fill = am4core.color("#FFF");

  series2.tooltip.getStrokeFromObject = true;
  series2.tooltip.background.strokeWidth = 3;

  series2.fillOpacity = 0.85;
  series2.stacked = true;

  // static
  series2.legendSettings.labelText = "Motorcycles total:";
  series2.legendSettings.valueText = "{valueY.close}";

  // hovering
  series2.legendSettings.itemLabelText = "Motorcycles:";
  series2.legendSettings.itemValueText = "{valueY}";

  var series3 = chart.series.push(new am4charts.LineSeries());
  series3.dataFields.valueY = "bicycles";
  series3.dataFields.valueYShow = "totalPercent";
  series3.dataFields.categoryX = "year";
  series3.name = "Bicycles";
  series3.tooltipText = "{name}: [bold]{valueY}[/]";

  series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

  series3.tooltip.getFillFromObject = false;
  series3.tooltip.background.fill = am4core.color("#FFF");

  series3.tooltip.getStrokeFromObject = true;
  series3.tooltip.background.strokeWidth = 3;

  series3.fillOpacity = 0.85;
  series3.stacked = true;

  // static
  series3.legendSettings.labelText = "Bicycles total:";
  series3.legendSettings.valueText = "{valueY.close}";

  // hovering
  series3.legendSettings.itemLabelText = "Bicycles:";
  series3.legendSettings.itemValueText = "{valueY}";

  // For adding bullets on the chart
  var bullet = series.bullets.push(new am4charts.CircleBullet());
  bullet.circle.stroke = am4core.color('#fff');
  bullet.circle.strokeWidth = 1;
  bullet.circle.radius = 10;
  bullet.circle.opacity = 1;
  bullet.circle.locationX = 0.6;

  // Add cursor
  chart.cursor = new am4charts.XYCursor();

  // add legend
  chart.legend = new am4charts.Legend();
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
  min-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div class="chart" id="chart"></div>

if you want to try to maximize the axis within the chart,
use startLocation & endLocation to bring the points closer to the edge.
if you do not want them all the way to the edge,
add to the end location, what you take away from the start.

categoryAxis.startLocation = 0.4;
categoryAxis.endLocation = 0.6;

see following working snippet...

$(document).ready(function() {
  // Create chart instance
  var chart = am4core.create("chart", am4charts.XYChart);
  chart.colors.step = 2;

  // Add data
  chart.data = [{
    "year": "1995",
    "cars": 1567,
    "motorcycles": 683,
    "bicycles": 146
  }, {
    "year": "1996",
    "cars": 1617,
    "motorcycles": 691,
    "bicycles": 138
  }, {
    "year": "1997",
    "cars": 1630,
    "motorcycles": 642,
    "bicycles": 127
  }, {
    "year": "1998",
    "cars": 1660,
    "motorcycles": 699,
    "bicycles": 105
  }, {
    "year": "1999",
    "cars": 1683,
    "motorcycles": 721,
    "bicycles": 109
  }, {
    "year": "2000",
    "cars": 1691,
    "motorcycles": 737,
    "bicycles": 112
  }, {
    "year": "2001",
    "cars": 1298,
    "motorcycles": 680,
    "bicycles": 101
  }];

  // Create axes
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "year";
  categoryAxis.title.text = "Year";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 20;

  categoryAxis.startLocation = 0.35;
  categoryAxis.endLocation = 0.65;

  var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.title.text = "Percent";
  valueAxis.calculateTotals = true;
  valueAxis.min = 0;
  valueAxis.max = 100;
  valueAxis.strictMinMax = true;
  valueAxis.renderer.labels.template.adapter.add("text", function(text) {
    return text + "%";
  });

  // Create series
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = "cars";
  series.dataFields.valueYShow = "totalPercent";
  series.dataFields.categoryX = "year";
  series.name = "Cars";

  series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

  series.tooltip.getFillFromObject = false;
  series.tooltip.background.fill = am4core.color("#FFF");

  series.tooltip.getStrokeFromObject = true;
  series.tooltip.background.strokeWidth = 3;

  series.fillOpacity = 0.85;
  series.stacked = true;

  // static
  series.legendSettings.labelText = "Cars total:";
  series.legendSettings.valueText = "{valueY.close}";

  // hovering
  series.legendSettings.itemLabelText = "Cars:";
  series.legendSettings.itemValueText = "{valueY}";

  var series2 = chart.series.push(new am4charts.LineSeries());
  series2.dataFields.valueY = "motorcycles";
  series2.dataFields.valueYShow = "totalPercent";
  series2.dataFields.categoryX = "year";
  series2.name = "Motorcycles";

  series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

  series2.tooltip.getFillFromObject = false;
  series2.tooltip.background.fill = am4core.color("#FFF");

  series2.tooltip.getStrokeFromObject = true;
  series2.tooltip.background.strokeWidth = 3;

  series2.fillOpacity = 0.85;
  series2.stacked = true;

  // static
  series2.legendSettings.labelText = "Motorcycles total:";
  series2.legendSettings.valueText = "{valueY.close}";

  // hovering
  series2.legendSettings.itemLabelText = "Motorcycles:";
  series2.legendSettings.itemValueText = "{valueY}";

  var series3 = chart.series.push(new am4charts.LineSeries());
  series3.dataFields.valueY = "bicycles";
  series3.dataFields.valueYShow = "totalPercent";
  series3.dataFields.categoryX = "year";
  series3.name = "Bicycles";
  series3.tooltipText = "{name}: [bold]{valueY}[/]";

  series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

  series3.tooltip.getFillFromObject = false;
  series3.tooltip.background.fill = am4core.color("#FFF");

  series3.tooltip.getStrokeFromObject = true;
  series3.tooltip.background.strokeWidth = 3;

  series3.fillOpacity = 0.85;
  series3.stacked = true;

  // static
  series3.legendSettings.labelText = "Bicycles total:";
  series3.legendSettings.valueText = "{valueY.close}";

  // hovering
  series3.legendSettings.itemLabelText = "Bicycles:";
  series3.legendSettings.itemValueText = "{valueY}";

  // For adding bullets on the chart
  var bullet = series.bullets.push(new am4charts.CircleBullet());
  bullet.circle.stroke = am4core.color('#fff');
  bullet.circle.strokeWidth = 1;
  bullet.circle.radius = 10;
  bullet.circle.opacity = 1;
  bullet.circle.locationX = 0.6;

  // Add cursor
  chart.cursor = new am4charts.XYCursor();

  // add legend
  chart.legend = new am4charts.Legend();
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
  min-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div class="chart" id="chart"></div>

Upvotes: 1

Related Questions