reactjschartsamchartsamcharts4
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,
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?
Solution
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>- Property 'toBeInTheDocument' does not exist on type 'Matchers<any>'
- Login to chrome extension via website with AWS amplify
- how to get react app to display api data as html instead of string when passed as prop
- Import "rest_framework" could not be resolved. But I have installed djangorestframework, I don't know what is going wrong
- Why is React component losing state sometime between setting state and keydown?
- CSS Modules and CSS keyframe animations
- Access token obtained with 'auth-code' login flow with 'drive.file' scope, later used for picking file and on the server returns "entity not found"
- _dirname is not defined in ES module scope
- How to pass returned value to different component
- Correct way to handle conditional styling in React
- Can i call componentWillUnmount (functional component) with current data?
- How to create unique keys for React elements?
- Warning: Text content did not match. Server: "I'm out" Client: "I'm in" div
- Compilation error due to (non-existant) import of react-refresh
- applying the same selectors on sibling have a slightly different behaviour
- Next js with react-leaflet window is not defined when refreshing page
- My Component in React JS application don't read the Headers from REST-Api - Headers is Empty
- react-select: How do I resolve “Warning: Prop `id` did not match”
- React Hooks - Input loses focus when 1 character is typed in
- WebSocket connection to 'wss://domain:3000/ws on production server. No websocket was actually installed
- How to remove Query Params
- Next js set query param. Why this way?
- How can I create a subrouter with React Router v6?
- useState or useRef for form submit
- How to add <canvas> support to my tests in Jest?
- Material-UI - How to customize dropdown icon in Autocomplete?
- How to render pseudo before content dynamically in styled-component
- I have a shopping app component that I only want to show on a particular page. Tried useLocation but the component has dynamic ids
- Nested Flexbox for navbar
- how to download file in react js