CODEWITHSUNDEEP
javascriptamcharts4
geudrik
geudrik

Reputation: 672

Bullets at pre-determined locations on top of column series (not column series values)

I have a chart with a column series, which spans some "time range" (ms). For each time range (bar), I can easily map a list of time values of related "things" that aren't a part of time series data set (as rendered by AmCharts - though they could be, I just have no idea what I'm doing).

How can I take a relational list of values (per bar), and plot them as bullets on top of each bar in my ColumnSeries?

My X axis is of type ValueAxis, and my series are of type ColumnSeries (horizontal chart). I want to super-impose "dots" (circles) on top of each bar/series at pre-determined locations.

Let's use a datasource such as the following

data = [
    {
        "min": 0,
        "max": 100,
        "dots": [10, 40, 80]
    },
    {
        "min": 30,
        "max": 150,
        "dots": [25, 500,110]
    }

]

This could easily build a very simple gaant chart via min/maxes. The step I'm stuck on is taking the dots field and using that as list of positions that bullets (am4) should be drawn on.

Upvotes: 1

Views: 222

Answers (1)

notacouch
notacouch

Reputation: 3655

It would help if you could provide some samples for us to work with so you yourself have a better idea of what you're looking to achieve.

amCharts v4 offers a lot of power and flexibility, what you could do is iterate through the data array, see what the greatest length of a dots array is (if it's too dynamic to know in advance), and make that amount of bullets. When those bullets load (bullet.events.on("inited", function(event) { var bullet = event.target; /* magic here */ })), check their data for the dots array, which index they represent, and place them along the axis via axis methods (like anyToPoint() to determine where there coordinates could be for that.

Definitely doable.

Or you could do something crazy, like flatten the dots arrays into your data array either for the chart or one specific for a "bullet" series. Then instead of having multiple bullets for each dot like mentioned above, just use a LineSeries instead and hide its line. E.g. where "income" is the data field for ColumnSeries and "expenses" is the field for LineSeries:

chart.data = [{
        "year": "2005",
        "income": 23.5,
        "expenses": 18.1
    },
    {
        "year": "2005",
        "expenses": 23.1
    },
    {
        "year": "2005",
        "expenses": 28.1
    }, 
    {
        "year": "2006",
        "income": 26.2,
        "expenses": 22.8
    },
    // ...
];

var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.categoryY = "year";
lineSeries.dataFields.valueX = "expenses";
lineSeries.strokeWidth = 0;

Check out this fork of our Bar and line chart mix demo:

https://codepen.io/team/amcharts/pen/3580a3329f04b8a4387a08c4be7e2f67

Screenshot:

screenshot of LineSeries simulating various bullets superimposed over ColumnSeries

Let us know what you think.

Upvotes: 1

Related Questions