SVG bullets with custom path and colors
This demo shows how we can use custom bullets with path set and “property fields” to bind each individual color to data.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
am4core.useTheme(am4themes_animated);
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { date: new Date(2018, 0, 1), value: 450, color: am4core.color("#FB0623") }, { date: new Date(2018, 0, 2), value: 269, color: am4core.color("#CF399B") }, { date: new Date(2018, 0, 3), value: 700, color: am4core.color("#144616") }, { date: new Date(2018, 0, 4), value: 490, color: am4core.color("#FB0623") }, { date: new Date(2018, 0, 5), value: 500, color: am4core.color("#CF399B") }, { date: new Date(2018, 0, 6), value: 550, color: am4core.color("#144616") }, { date: new Date(2018, 0, 7), value: 420, color: am4core.color("#FB0623") }];
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.grid.template.location = 0;dateAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesfunction createSeries(field, name) { var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = field; series.dataFields.dateX = "date"; series.name = name; series.tooltipText = "{dateX}: [b]{valueY}[/]"; series.strokeWidth = 2;
var bullet = series.bullets.push(new am4core.Sprite()); bullet.path = "M19 .8l5.65 11.43 12.62 1.83-9.14 8.9 2.16 12.58L19 29.6 7.7 35.54l2.17-12.57-9.14-8.9 12.62-1.84z"; bullet.width = 20; bullet.height = 20; bullet.horizontalCenter = "middle"; bullet.verticalCenter = "middle"; bullet.propertyFields.fill = "color"; bullet.strokeWidth = 2;}
createSeries("value", "Series #1");
chart.cursor = new am4charts.XYCursor();<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 350px;}svg-bullets-with-custom-path-and-colors