Home/ Questions/Q 8139721
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T11:55:27+00:00

I am trying to create a chart which has both actual data and the

  • 0

I am trying to create a chart which has both actual data and the target for the actual data. I am trying to show the target data bars behind the real data bars and move the target data plot slightly to the left.

Like this:

enter image description here

I tried to move the whole plot but I could not find out how. I also thought that if I added a different y-axis I could possibly move the axis to the left or decrease the gap between the axis and the plot however I cannot find any results from my internet search (all results seem to show .setAxisWindow() which I know is for panning but is there a way I could use that?).

This is the script I currently have:

function setupChart(Chart, theme, Columns, Highlight)
{
    var realData = [2.50,3.45,1.22,1.86,2.54, 4.01, {y:3.10, color : 'green'}];
    var targetData = [2.00,2.00,2.00,2.86,2.54, 2.00, 2.00];

    var chart = new Chart("weekElectricBar", {title: 'Daily Heating Cost',  titleGap: 0, titleFont: 'bold normal normal 15px Tahoma',  titleFontColor: "black"});

    chart.setTheme(theme);

    chart.addPlot("default", {
        type: "Columns",
        markers: true,
        gap: 5,
        font: "bold normal 14px Tahoma",
        fontColor: "Black",
        shadows: {dx:4, dy:4}
    });

     chart.addPlot("back", {
        type: "Columns",
        vAxis: "other y",
        markers: true,
        gap: 5,
        font: "bold normal 14px Tahoma",
        fontColor: "Black",
        shadows: {dx:4, dy:4}
    });
    chart.addAxis("other y", { type : 'Invisible', includeZero: true, fixUpper: 'major', vertical: true, min: 0, max:5});

    chart.addAxis("y", {includeZero: true, fixUpper: 'major', vertical: true,  min: 0, max:5, labels: [{value: 0, text: "£0"}, {value: 1, text: "£1"}, {value: 2, text: "£2"}, {value: 3, text: "£3"}, {value: 4, text: "£4"}, {value: 5, text: "£5"}] });
    chart.addAxis("x", {labels: [{value: 1, text: "Wed"}, {value: 2, text: "Thurs"}, {value: 3, text: "Fri"}, {value: 4, text: "Sat"}, {value: 5, text: "Sun"}, {value: 6, text: "Mon"}, {value: 7, text: "Last 24 Hrs"}]});

    chart.addSeries("realData",realData, {plot: "back"});
    chart.addSeries("targetData",targetData);

    chart.render();
}

Alternatively, might it be possible to increase the ‘gap’ property for just one column? Another way to look at it would be to use clustered columns and then reduce the gap between clustered columns – but I don’t think that is possible.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It appears there is not way to do this so I am using a cheat that achieves this effect. It works by adding a plot of normal columns (which is added first) and a plot of clustered columns (where one series is all 0). The width of all columns is set to be equal.

    This is what I have now:

    function setupWeekElectricBar(Chart, theme, ClusteredColumns, Columns)
{
    var realData = [2.50,3.45,1.22,1.86,2.54, 4.01, {y:3.10, color: 'green'}]; // a new array
    var blankData = [0,0,0,0,0]; // a new array

    var targetData = [2.00,2.00,2.00,2.86,2.54, 2.00, 2.00];

    var chart = new Chart("weekElectricBar", {title: 'Daily Heating Cost',  titleGap: 0, titleFont: 'bold normal normal 15px Tahoma',  titleFontColor: "black"});

    chart.setTheme(theme);

     chart.addPlot("default", {
        type: ClusteredColumns,
        markers: true,
        gap: 5,
        minBarSize : 40,
        maxBarSize : 40,
        font: "bold normal 14px Tahoma",
        fontColor: "Black",
        shadows: {dx:4, dy:4}
    });

    chart.addPlot("back", {
        type: Columns,
        markers: true,
        gap: 5,
        minBarSize : 40,
        maxBarSize : 40,
        font: "bold normal 14px Tahoma",
        fontColor: "Black",
        shadows: {dx:4, dy:4}
    });

    chart.addAxis("y", {includeZero: true, fixUpper: 'major', vertical: true, min: 0, max:5, labels: [{value: 0, text: "£0"}, {value: 1, text: "£1"}, {value: 2, text: "£2"}, {value: 3, text: "£3"}, {value: 4, text: "£4"}, {value: 5, text: "£5"}] });
    chart.addAxis("x", {labels: [{value: 1, text: "Wed"}, {value: 2, text: "Thurs"}, {value: 3, text: "Fri"}, {value: 4, text: "Sat"}, {value: 5, text: "Sun"}, {value: 6, text: "Mon"}, {value: 7, text: "Last 24 Hrs"}]});

    chart.addSeries("blankData",blankData, {width: 2});
    chart.addSeries("realData",realData);
    chart.addSeries("targetData",targetData, {plot:'back'});

    chart.render();
}
    • 0