javascriptamchartsamcharts4
How to scale up the first bullet of amCharts series?
Here is the chart I want to modify:
As you can see it's a line chart and an image overlies on the first bullet of each series (Users Image!).
Now I want a circle around each Image with the same color as each series's line.
Something like this:
I think if we could scale up the first bullet of each series we would archive that goal.
Here is where the code creates the bullet and its properties but the changes here will affects all bullets in userA_series :
var bullet = userA_series.bullets.push(new am4charts.CircleBullet())
bullet.circle.radius = 8;
bullet.fill = am4core.color("#ff0037");
bullet.stroke = am4core.color("#ff0037");
bullet.strokeWidth = 20;
And Here is the whole code:
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Import data from server
var inGroup = true;
var repeats = ["Start", "Day", "Week", "Month", "3th Month", "Year", "7th", "8th", "9th", "10th"];
var userA_Diamonds = ["7", "12", "18", "24", "20", "16", "19", "25", "29", "32"];
var userA_Performance = ["94", "29", "40", "65", "88", "89", "90", "75", "80", "89"];
var userA_GameOvers = ["8", "4", "4", "3", "5", "2", "1", "0", "0", "1"];
var userA_Rank = ["115", "114", "100", "98", "87", "55", "12", "45", "65", "18"];
userA_Performance.length = 3;
var userB_Performance = ["62", "55", "78", "84", "89", "87", "95", "74", "112", "115", "114"];
userB_Performance.length = 2;
var userC_Performance = ["25", "36", "42", "51", "49", "61", "68", "75", "90", "100", "112"];
userC_Performance.length = 1;
var userD_Performance = ["45", "49", "68", "64", "89", "110", "87", "46", "89", "64", "89"];
userD_Performance.length = 1;
// Add data
chart.data = [{
"repeat": "1th",
}, {
"repeat": repeats[0],
"DiamondsA": userA_Diamonds[0],
"PerformanceA": userA_Performance[0],
"GameOversA": userA_GameOvers[0],
"RankA": userA_Rank[0],
"PerformanceB": userB_Performance[0],
"PerformanceC": userC_Performance[0],
"PerformanceD": userD_Performance[0],
"bulletD": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1",
"bulletC": "https://www.scripturaengage.com/wp-content/uploads/2017/03/Profile-Picture-Gert-Cools-Circle.png",
"bulletB": "https://www.cpisandiego.org/wp-content/uploads/2018/07/Andrea-profile-pic_circle-300x300.png",
"bulletA": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png",
}, {
"repeat": repeats[1],
"DiamondsA": userA_Diamonds[1],
"PerformanceA": userA_Performance[1],
"GameOversA": userA_GameOvers[1],
"RankA": userA_Rank[1],
"PerformanceB": userB_Performance[1],
"PerformanceC": userC_Performance[1],
"PerformanceD": userD_Performance[1],
}, {
"repeat": repeats[2],
"DiamondsA": userA_Diamonds[2],
"PerformanceA": userA_Performance[2],
"GameOversA": userA_GameOvers[2],
"RankA": userA_Rank[2],
"PerformanceB": userB_Performance[2],
"PerformanceC": userC_Performance[2],
"PerformanceD": userD_Performance[2],
}, {
"repeat": repeats[3],
"DiamondsA": userA_Diamonds[3],
"PerformanceA": userA_Performance[3],
"GameOversA": userA_GameOvers[3],
"RankA": userA_Rank[3],
"PerformanceB": userB_Performance[3],
"PerformanceC": userC_Performance[3],
"PerformanceD": userD_Performance[3],
}, {
"repeat": repeats[4],
"DiamondsA": userA_Diamonds[4],
"PerformanceA": userA_Performance[4],
"GameOversA": userA_GameOvers[4],
"RankA": userA_Rank[4],
"PerformanceB": userB_Performance[4],
"PerformanceC": userC_Performance[4],
"PerformanceD": userD_Performance[4],
}, {
"repeat": repeats[5],
"DiamondsA": userA_Diamonds[5],
"PerformanceA": userA_Performance[5],
"GameOversA": userA_GameOvers[5],
"RankA": userA_Rank[5],
"PerformanceB": userB_Performance[5],
"PerformanceC": userC_Performance[5],
"PerformanceD": userD_Performance[5],
}, {
"repeat": repeats[6],
"DiamondsA": userA_Diamonds[6],
"PerformanceA": userA_Performance[6],
"GameOversA": userA_GameOvers[6],
"RankA": userA_Rank[6],
"PerformanceB": userB_Performance[6],
"PerformanceC": userC_Performance[6],
"PerformanceD": userD_Performance[6],
}, {
"repeat": repeats[7],
"DiamondsA": userA_Diamonds[7],
"PerformanceA": userA_Performance[7],
"GameOversA": userA_GameOvers[7],
"RankA": userA_Rank[7],
"PerformanceB": userB_Performance[7],
"PerformanceC": userC_Performance[7],
"PerformanceD": userD_Performance[7],
}, {
"repeat": repeats[8],
"DiamondsA": userA_Diamonds[8],
"PerformanceA": userA_Performance[8],
"GameOversA": userA_GameOvers[8],
"RankA": userA_Rank[8],
"PerformanceB": userB_Performance[8],
"PerformanceC": userC_Performance[8],
"PerformanceD": userD_Performance[8],
}, {
"repeat": repeats[9],
"DiamondsA": userA_Diamonds[9],
"PerformanceA": userA_Performance[9],
"GameOversA": userA_GameOvers[9],
"RankA": userA_Rank[9],
"PerformanceB": userB_Performance[9],
"PerformanceC": userC_Performance[9],
"PerformanceD": userD_Performance[9],
}, {
"repeat": "2019",
} ];
if(userA_Performance.length < 7){
splicer(8, 4);
} else{
};
function splicer(a, b) {
chart.data.splice( a, b );
}
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "repeat";
categoryAxis.renderer.grid.template.disabled = false;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;
categoryAxis.renderer.minLabelPosition = 0.05;
categoryAxis.renderer.maxLabelPosition = 0.95;
categoryAxis.renderer.grid.template.strokeDasharray = "4,4";
var categoryAxisTooltip = categoryAxis.tooltip.background;
categoryAxisTooltip.pointerLength = 0;
categoryAxisTooltip.fillOpacity = 0.9;
categoryAxisTooltip.filters.push(new am4core.BlurFilter).blur = 5;
categoryAxis.tooltip.dy = 5;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.grid.template.disabled = false;
valueAxis.renderer.minLabelPosition = 0.05;
valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis.renderer.grid.template.strokeDasharray = "4,4";
// Create Colored Range
var range = valueAxis.axisRanges.create();
range.value = 100;
range.endValue = 200;
range.axisFill.fill = am4core.color("#46f727");
range.axisFill.fillOpacity = 0.01;
// Create Colored Line
var range = valueAxis.axisRanges.create();
range.value = 100;
range.grid.stroke = am4core.color("#f72727");
range.grid.strokeWidth = 2;
range.grid.strokeOpacity = 0.1;
//var valueAxisTooltip = valueAxis.tooltip.background;
//valueAxisTooltip.pointerLength = 0;
//valueAxisTooltip.fillOpacity = 0.8;
//valueAxisTooltip.filters.push(new am4core.BlurFilter).blur = 5;
valueAxis.cursorTooltipEnabled = false;
// Do not crop bullets
chart.maskBullets = false;
// Remove padding
chart.paddingBottom = 35;
chart.paddingTop = 50;
// Create userD_series: light Blue
var userD_series = chart.series.push(new am4charts.LineSeries());
userD_series.dataFields.categoryX = "repeat";
userD_series.dataFields.valueY = "PerformanceD";
userD_series.stroke = am4core.color("#5394fc");
userD_series.strokeWidth = 2;
userD_series.strokeDasharray = "3,3";
userD_series.tooltipText = "[bold #6b12e4 font-size: 14]{valueY}%[/]";
userD_series.tooltip.pointerOrientation = "vertical";
userD_series.tooltip.label.textAlign = "middle";
userD_series.tooltip.label.background.fill = am4core.color("#fcf9f9");
userD_series.tooltip.background.strokeWidth = 10;
userD_series.tooltip.background.cornerRadius = 3;
userD_series.tooltip.disabled = true;
var bullet = userD_series.bullets.push(new am4charts.CircleBullet())
bullet.circle.radius = 8;
bullet.fill = am4core.color("#5394fc");
bullet.stroke = am4core.color("#5394fc");
bullet.strokeWidth = 3;
var shadow1 = new am4core.DropShadowFilter();
userD_series.filters.push(shadow1);
// Create userC_series: Dark Blue
var userC_series = chart.series.push(new am4charts.LineSeries());
userC_series.dataFields.categoryX = "repeat";
userC_series.dataFields.valueY = "PerformanceC";
userC_series.stroke = am4core.color("#0027d8");
userC_series.strokeWidth = 2;
userC_series.strokeDasharray = "3,3";
userC_series.tooltipText = "[bold #6b12e4 font-size: 14]{valueY}%[/]";
userC_series.tooltip.pointerOrientation = "vertical";
userC_series.tooltip.label.textAlign = "middle";
userC_series.tooltip.label.background.fill = am4core.color("#fcf9f9");
userC_series.tooltip.background.strokeWidth = 10;
userC_series.tooltip.background.cornerRadius = 3;
userC_series.tooltip.disabled = true;
var bullet = userC_series.bullets.push(new am4charts.CircleBullet())
bullet.circle.radius = 8;
bullet.fill = am4core.color("#0400ff");
bullet.stroke = am4core.color("#0400ff");
bullet.strokeWidth = 3;
var shadow1 = new am4core.DropShadowFilter();
userC_series.filters.push(shadow1);
// Create userB_series: Blue
var userB_series = chart.series.push(new am4charts.LineSeries());
userB_series.dataFields.categoryX = "repeat";
userB_series.dataFields.valueY = "PerformanceB";
userB_series.stroke = am4core.color("#732ec9");
userB_series.strokeWidth = 2;
userB_series.strokeDasharray = "3,3";
userB_series.tooltipText = "[bold #002aff font-size: 14]{valueY}%[/]";
userB_series.tooltip.pointerOrientation = "vertical";
userB_series.tooltip.label.textAlign = "middle";
userB_series.tooltip.label.background.fill = am4core.color("#fcf9f9");
userB_series.tooltip.background.strokeWidth = 10;
userB_series.tooltip.background.cornerRadius = 3;
userB_series.tooltip.disabled = true;
var bullet = userB_series.bullets.push(new am4charts.CircleBullet())
bullet.circle.radius = 8;
bullet.fill = am4core.color("#6a1ec9");
bullet.stroke = am4core.color("#6a1ec9");
bullet.strokeWidth = 3;
var shadow2 = new am4core.DropShadowFilter();
userB_series.filters.push(shadow2);
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
// Create userA_series: Red
var userA_series = chart.series.push(new am4charts.LineSeries());
userA_series.dataFields.categoryX = "repeat";
userA_series.dataFields.valueY = "PerformanceA";
userA_series.stroke = am4core.color("#ff0037");
userA_series.strokeWidth = 4;
userA_series.strokeDasharray = "12,3";
//userA_series.tooltipText = "[bold #ff0037 font-size: 14]{valueY}%[/]";
//userA_series.tooltip.pointerOrientation = "vertical";
//userA_series.tooltip.label.textAlign = "middle";
userA_series.tooltipHTML = "<img src='Images/Diamonds.png' style='vertical-align:middle; margin-right: 14px; width:38px; height:34px;'><span style='font-size:14px; color:#448afc;'><b>Diamonds: {DiamondsA}</b></span><br><img src='Images/Performance.png' style='vertical-align:middle; margin-right: 10px; width:42px; height:40px;'><span style='font-size:14px; color:#000000;'><b>Performance: {PerformanceA}</b></span><br><img src='Images/Game-Overs.png' style='vertical-align:middle; margin-right: 20px; width:32px; height:30px;'><span style='font-size:14px; color:#000000;'><b>Game Overs: {GameOversA}</b></span><br><img src='Images/Rank.png' style='vertical-align:middle; margin-right: 10px; width:43px; height:41px;'><span style='font-size:14px; color:#000000;'><b>Rank: {RankA}</b></span>";
userA_series.tooltip.label.background.fill = am4core.color("#f7f7f7");
userA_series.tooltip.background.strokeWidth = 10;
userA_series.tooltip.background.cornerRadius = 3;
var bullet = userA_series.bullets.push(new am4charts.CircleBullet())
bullet.circle.radius = 8;
bullet.fill = am4core.color("#ff0037");
bullet.stroke = am4core.color("#ff0037");
bullet.strokeWidth = 20;
var bullet3hover = bullet.states.create("hover");
bullet3hover.properties.scale = 1.4;
var shadow1 = new am4core.DropShadowFilter();
userA_series.filters.push(shadow1);
// Add bullets 1
var bullet = userA_series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 100;
image.height = 100;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 45;
image.y = am4core.percent(100);
image.propertyFields.href = "bulletA";
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
// Add bullets 2
var bullet = userB_series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 50;
image.height = 50;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 20;
image.y = am4core.percent(100);
image.propertyFields.href = "bulletB";
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
// Add bullets 3
var bullet = userC_series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 50;
image.height = 50;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 20;
image.y = am4core.percent(100);
image.propertyFields.href = "bulletC";
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
// Add bullets 4
var bullet = userD_series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 50;
image.height = 50;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 20;
image.y = am4core.percent(100);
image.propertyFields.href = "bulletD";
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
HTML
<!-- Resources -->
<script language="JavaScript" src="amcharts4/core.js"></script>
<script language="JavaScript" src="amcharts4/charts.js"></script>
<script language="JavaScript" src="amcharts4/themes/animated.js"></script>
<div id="chartdiv"></div>
<link rel="stylesheet" href="Style.css">
<script src="Script.js"></script>
CSS
#chartdiv {
width: 1500px;
height: 700px;
}
body {
margin: 160 100 100 20;
background-color: transparent;
overflow:hidden;
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
}
Solution
You can use an Adapter for that. Just add an adapter to the radius property of the bullet circle:
bullet.circle.radius = 8;
bullet.circle.adapter.add("radius", (radius, target, key) => {
if (target.dataItem.dataContext.repeat === 'Start') {
return 50;
}
return radius;
});
In some cases you should change the image.dy property to center the image in the circle bullet:
image.dy = 50;
I created this code pen as reference. But I added the adapter only for the first series, you have to do it for the others yourelf
- Chunk downloading of the big files right to the hard drive
- My custom CSS transition animation is not working on hover after I added AOS JS library
- how to get the Google analytics client ID
- Toggle vue-multiselect close/open on button click
- Best way to filter an objects's properties for data
- Passing function with arguments as a prop and invoking it internally in React
- Outlook calendar don't render with FullCalendar
- Is there a way to validate and allow only https url's using .isUri i.e. without using Regex in JavaScript?
- How to clear react native webview cookies?
- Skipping a test in Cypress conditionally
- How can I get all the HTML in a document or node containing shadowRoot elements
- Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; }
- Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- Is there is a C# function which is similar to .Map() in JavaScript?
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- How do I test a Node.JS Script that is not a module and runs as soon as it's called?
- Set element width based on a string that is not in the element
- Testing JavaScript Written for the Browser in Node JS
- Where are the trailing commas coming from in these radio buttons?
- How to verify a signature from the Phantom wallet?
- How to get the value of a Google Chrome flag using Javascript
- event.preventDefault cannot block clipboard paste in chatgpt.com prompt box
- Should I use ref or findDOMNode to get react root dom node of an element?
- Disable button for 5 seconds with different label and change after it
- JavaScript - Get all but last item in array
- React-Redux: Should all component states be kept in Redux Store
- Is it possible to use Closure Compiler ADVANCED_OPTIMIZATIONS with jQuery?
- Capture selected option returns not defined instead
- Uncaught TypeError: matchExpr[type].exec is not a function