function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Group bars side by side

I am working with visualforce charting. I have bars series that show information. I would like the bars on the chart to be grouped by name and for the bars to be side by side.

If you need anymore information from me please let me know.


<!-- Visualforce page: -->

<apex:page controller="ChartController">
<apex:form >
<apex:pageBlock >
    <apex:pageBlockSection columns="1">
        <apex:chart height="400" width="700" data="{!data}" >
            <apex:legend position="right"/>
            <apex:axis type="Numeric" position="right" fields="data1"  title="Revenue (millions)" grid="true"/>
            <apex:axis type="Category" position="bottom" fields="name"  title="Month of the Year">
                <apex:chartLabel rotate="315"/>
            <apex:barSeries title="Data1" orientation="vertical" axis="right"  xField="name" yField="data1" colorSet="red" stacked="false">
                <apex:chartTips height="20" width="120"/>
            <apex:barSeries title="Data2" orientation="vertical" axis="right"  xField="name" yField="data2" colorSet="green" stacked="false">
                <apex:chartTips height="20" width="120"/>
            <apex:barSeries title="Data3" orientation="vertical" axis="right"  xField="name" yField="data3" stacked="false">
                <apex:chartTips height="20" width="120" />

<!-- Controller Code: -->

public class ChartController {
    // Return a list of data points for a chart 
    public List<Data> getData() {
        return ChartController.getChartData();
    // Make the chart data available via JavaScript remoting 
    public static List<Data> getRemoteData() {
        return ChartController.getChartData();

    // The actual chart data; needs to be static to be 
    // called by a @RemoteAction method 
    public static List<Data> getChartData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Jan', 30, 90, 55));
        data.add(new Data('Feb', 44, 15, 65));
        data.add(new Data('Mar', 25, 32, 75));
        data.add(new Data('Apr', 74, 28, 85));
        data.add(new Data('May', 65, 51, 95));
        data.add(new Data('Jun', 33, 45, 99));
        data.add(new Data('Jul', 92, 82, 35));
        data.add(new Data('Aug', 87, 73, 45));
        data.add(new Data('Sep', 34, 65, 55));
        data.add(new Data('Oct', 78, 66, 56));
        data.add(new Data('Nov', 80, 67, 53));
        data.add(new Data('Dec', 17, 70, 70));
        return data;
    // Wrapper class 
    public class Data {
        public String name { get; set; }
        public Integer data1 { get; set; }
        public Integer data2 { get; set; }
        public Integer data3 { get; set; }
        public Data(String name, Integer data1, Integer data2, Integer data3) {
   = name;
            this.data1 = data1;
            this.data2 = data2;
            this.data3 = data3;


Best Answer chosen by Admin (Salesforce Developers) 



<apex:barSeries title="Data1" orientation="vertical" axis="right"  xField="name" yField="data1,data2,data3" colorSet="red">

All Answers




<apex:barSeries title="Data1" orientation="vertical" axis="right"  xField="name" yField="data1,data2,data3" colorSet="red">
This was selected as the best answer

Thanks that helps. Of course it is something simple.