CODEWITHSUNDEEP
chartsgoogle-visualization
Harry
Harry

Reputation: 4773

create single bar with different data using Google charts

Can I create these types of charts using Google charts where I can set the target at top also.

Are these charts bar type. I didn't find anything which can make bar charts like this or is this a completely different chart type.

Edit

I found the solution at Google Chart Tools - How to create stacked bar chart. These are stacked bar charts. but still I didn't find how to put target at the top

Upvotes: 0

Views: 495

Answers (1)

asgallant
asgallant

Reputation: 26340

Use a ComboChart, and set the series.<series index>.type option to 'bars' for the "Pending", "Loss", and "Won" series. Set the series.<series index>.type to 'steppedArea' and series.<series index>.opacity to 0 for the "Target" series. Set the connectSteps option to false. Here's one way to do it, assuming your data is in the order "Won", "Loss", "Pending", "Target":

var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
chart.draw(data, {
    height: 400,
    width: 600,
    isStacked: true,
    connectSteps: false,
    series: {
        0: {
            // Won
            type: 'bars'
        },
        1: {
            // Loss
            type: 'bars'
        },
        2: {
            // Pending
            type: 'bars'
        },
        3: {
            // Target
            type: 'steppedArea',
            areaOpacity: 0
        }
    }
});

Upvotes: 1

Related Questions