amcharts5 - chart above another chart using same xaxis?

Question

I am attempting to show a column chart (or a line chart would work too) above a gannt chart using the same xaxis (timestamp) and having trouble with spacing as well as getting any data to show in the column chart. I don't even know if this is possible to do, but the help docs made it sound like it was so I am more than likely missing quite a few things in the configuration or doing things wrong.

I've created a codepen with what I have so far. The original gannt chart shows fine, then I am able to get the column chart's yaxis to show (although it overlaps the gannt instead of being above it and does not show any data).

Any assistance/explanation with this would be appreciated.

// Set data
var data = [{
            "State": "Idle",
            "Start": 1424321864000,
            "End": 1424321875000,
            "Duration": 11
}, {
            "State": "Idle",
            "Start": 1424322649000,
            "End": 1424322669000,
            "Duration": 20
}, {
            "State": "Idle",
            "Start": 1424322970000,
            "End": 1424322981000,
            "Duration": 11
}, {
            "State": "Idle",
            "Start": 1424323093000,
            "End": 1424323139000,
            "Duration": 46
}, {
            "State": "Active",
            "Start": 1424323250000,
            "End": 1424323268000,
            "Duration": 18
}, {
            "State": "Idle",
            "Start": 1424323680000,
            "End": 1424323703000,
            "Duration": 23
}];

var mousekeys = [{
            "Timestamp": 1424318400000,
            "Clicks": "20",
            "Keypresses": "30"
}];
/**
 * ---------------------------------------
 * This demo was created using amCharts 5.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v5/
 * ---------------------------------------
 */

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");

//font size theme
var myTheme = am5.Theme.new(root);
myTheme.rule("Label").setAll({
  fontSize: 12
});

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);

root.locale = am5locales_en_US;
//chartReg['chart'].utc = true; //force chart to show in UTC instead of device timezone
root.timezone = am5.Timezone.new('UTC'); //user timezone

//duration format
root.durationFormatter.setAll({
  baseUnit: "second",
  durationFormat: "hh'h' mm'm' ss's'"
});

//create chart
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: false,
  panY: false,
  wheelX: false,
  wheelY: false,
  layout: root.verticalLayout, 
  marginTop: 0,
  marginRight: 0,
  marginBottom: 0,
  marginLeft: 0,
  paddingTop: 0,
  paddingRight: 20,
  paddingBottom: 20,
  paddingLeft: 10,
}));

//zoom button
//chart.zoomOutButton.setAll({
//  forceHidden: true, //disables zoom button
//});

chart.zoomOutButton.get("background").setAll({
  fill: am5.color("#BDBDBD"),
});

chart.zoomOutButton.get("background").states.create("hover", {}).setAll({
  fill: am5.color("#8a8a8a"),
});

chart.zoomOutButton.get("background").states.create("down", {}).setAll({
  fill: am5.color("#707070"),
});

chart.zoomOutButton.get("background").states.create("active", {}).setAll({
  fill: am5.color("#707070"),
});

//create axes
var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
  text: "State",
  fontWeight: "500",
  height: am5.percent(70),
  categoryField: "State",
  renderer: am5xy.AxisRendererY.new(root, {}),
  tooltip: am5.Tooltip.new(root, {}),
}));


var yAxis2 = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  text: "Clicks",
  fontWeight: "500",
  height: am5.percent(30),
  min: 0, //min 'hint', but not forced
  //strictMinMax: true, //forces the min/max
  //extraMax: 0.1, //extra 10% to the value range which acts as 'padding' to the yaxis
  renderer: am5xy.AxisRendererY.new(root, {})
}));

//the order is top to bottom ends up bottom to top on the chart
yAxis.data.setAll([
  { State: "Idle" },
  { State: "Active" }
]);

//y-axis dash lines
var yRenderer = yAxis.get("renderer");
yRenderer.grid.template.setAll({
  strokeDasharray: [6]
});

var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
  baseInterval: { timeUnit: "second", count: 1 },
  renderer: am5xy.AxisRendererX.new(root, {}),
  tooltip: am5.Tooltip.new(root, {}),
  tooltipDateFormat: "EEE, MMM dd @ h:mm:ss a"
}));

//x-axis dash lines
var xRenderer = xAxis.get("renderer");
xRenderer.grid.template.setAll({
  strokeDasharray: [6],
});

//series
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  openValueXField: "Start",
  valueXField: "End",
  categoryYField: "State",
  sequencedInterpolation: true,
  tooltip: am5.Tooltip.new(root, {
    //labelText: "[bold {Color} fontSize: 16px]{State}[/]\n[bold]Start :[/] {openValueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '@' h':'mm':'ss a\")}\n[bold]End :[/] {valueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '@' h':'mm':'ss a\")}\n[bold]Duration :[/] {Duration.formatDuration(\"hh'h' mm'm' ss's'\")}",
    labelText: "[bold]Start :[/] {openValueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '@' h':'mm':'ss a\")}\n[bold]End :[/] {valueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '@' h':'mm':'ss a\")}\n[bold]Duration :[/] {Duration.formatDuration(\"hh'h' mm'm' ss's'\")}",
    getFillFromSprite: false
  })
}));

series.get("tooltip").get("background").setAll({
  fill: am5.color("#ffffff"),
  fillOpacity: 1,
  strokeWidth: 2,
  stroke: am5.color("#bbbbbb"),
});

//series columns
series.columns.template.setAll({
  fillOpacity: 1,
  stroke: 0,
  strokeWidth: 0, //doesn't seem to work use 'stroke:0'
  tooltipText: "{State}:\n[bold]{openValueX}[/] - [bold]{valueX}[/]"
});

series.columns.template.adapters.add("fill", function (text, target, key) {
  //console.log(target);
  //have to check for empty
  //if(target.dataItem) {
  if(target.dataItem.dataContext.State == "Active") {
    return am5.color("#7bc07b"); //active
  } else {
    return am5.color("#55bfe6"); //idle
  }
  //} else {
  //    return null;
  //}
});

//series
var series2 = chart.series.push(am5xy.ColumnSeries.new(root, {
  name: "Clicks",
  fill: am5.color("#679fd0"),
  xAxis: xAxis,
  yAxis: yAxis2,
  valueYField: "Clicks",
  valueXField: "Timestamp",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueY}",
    getFillFromSprite: false
  })
}));

series2.get("tooltip").get("background").setAll({
  fill: am5.color("#ffffff"),
  fillOpacity: 1,
  strokeWidth: 2,
  stroke: am5.color("#bbbbbb"),
});

//series columns
series2.columns.template.setAll({
  fillOpacity: 1,
  stroke: 0,
  strokeWidth: 0, //doesn't seem to work use 'stroke:0'
});

series2.get("tooltip").label.adapters.add("text", function (text, target, key) {
  //console.log(target);
  //have to check for empty
  if(target.dataItem) {
    return "Total : [bold]{Clicks}[/]\nTimestamp : [bold]{Timestamp}[/]";
  } else {
    return null;
  }
});

//title
var title = chart.children.unshift(am5.Label.new(root, {
  fontSize: 12,
  textAlign: "left",
  x: am5.percent(0),
  y: am5.percent(0),
  marginTop: 0,
  marginRight: 0,
  marginBottom: 30,
  marginLeft: 0,
  paddingTop: 0,
  paddingRight: 0,
  paddingBottom: 0,
  paddingLeft: 0,
  text: "some label"
}));

//cursor
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
  snapToSeries: [ series ],
  snapToSeriesBy: "x",
  behavior: "zoomX"
}));
cursor.lineX.set("visible", false);
cursor.lineY.set("visible", false);

//formatting
series.data.processor = am5.DataProcessor.new(root, {
  dateFields: ["Start", "End"],
  dateFormat: "xxxxxxxxxxxxx"
});

//formatting
series2.data.processor = am5.DataProcessor.new(root, {
  numericFields: ["Clicks"],
  dateFields: ["Timestamp"],
  dateFormat: "xxxxxxxxxxxxx"
});

//scrollbar
chart.set("scrollbarX", am5.Scrollbar.new(root, {
  orientation: "horizontal",
  marginTop: 0,
  marginRight: 0,
  marginBottom: 30,
  marginLeft: 0,
  paddingTop: 0,
  paddingRight: 0,
  paddingBottom: 0,
  paddingLeft: 0,
}));

//exporting
exporting = am5plugins_exporting.Exporting.new(root, {
  dataSource: data,
  dataFields: {
    State: 'State', Start: 'Start', End: 'End', Duration: 'Duration'
  },
  dateFields: ["Start", "End"],
  dateFormat: "MM/dd/yyyy hh:mm:ss a",
  durationFields: ["Duration"],
  durationFormat: "hh'h' mm'm' ss's'",
  filePrefix: 'User Activity'
});

//add data
series.data.setAll(data);
series2.data.setAll(mousekeys);

//make stuff animate on load
series.appear(1000);
series2.appear(1000);
chart.appear(1000, 100);

Answer 1

yAxis and yAxis2 are not stacked. You have to be more explicit and add this line of code:

chart.leftAxesContainer.set("layout", root.verticalLayout);

If you want to place your column chart above, you need to push yAxis2 before yAxis or use unshift() :

var yAxis2 = chart.yAxes.unshift(am5xy.ValueAxis.new(root, {
  // ...
}));

I put your code below with these two little modifications:

 // Set data var data = [{ "State": "Idle", "Start": 1424321864000, "End": 1424321875000, "Duration": 11 }, { "State": "Idle", "Start": 1424322649000, "End": 1424322669000, "Duration": 20 }, { "State": "Idle", "Start": 1424322970000, "End": 1424322981000, "Duration": 11 }, { "State": "Idle", "Start": 1424323093000, "End": 1424323139000, "Duration": 46 }, { "State": "Active", "Start": 1424323250000, "End": 1424323268000, "Duration": 18 }, { "State": "Idle", "Start": 1424323680000, "End": 1424323703000, "Duration": 23 }]; var mousekeys = [{ "Timestamp": 1424318400000, "Clicks": "20", "Keypresses": "30" }]; /** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */ // Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element var root = am5.Root.new("chartdiv"); //font size theme var myTheme = am5.Theme.new(root); myTheme.rule("Label").setAll({ fontSize: 12 }); root.setThemes([ am5themes_Animated.new(root), myTheme ]); root.locale = am5locales_en_US; //chartReg['chart'].utc = true; //force chart to show in UTC instead of device timezone root.timezone = am5.Timezone.new('UTC'); //user timezone //duration format root.durationFormatter.setAll({ baseUnit: "second", durationFormat: "hh'h' mm'm' ss's'" }); //create chart var chart = root.container.children.push(am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: false, wheelY: false, layout: root.verticalLayout, marginTop: 0, marginRight: 0, marginBottom: 0, marginLeft: 0, paddingTop: 0, paddingRight: 20, paddingBottom: 20, paddingLeft: 10, })); chart.leftAxesContainer.set("layout", root.verticalLayout); // <--- HERE //zoom button //chart.zoomOutButton.setAll({ // forceHidden: true, //disables zoom button //}); chart.zoomOutButton.get("background").setAll({ fill: am5.color("#BDBDBD"), }); chart.zoomOutButton.get("background").states.create("hover", {}).setAll({ fill: am5.color("#8a8a8a"), }); chart.zoomOutButton.get("background").states.create("down", {}).setAll({ fill: am5.color("#707070"), }); chart.zoomOutButton.get("background").states.create("active", {}).setAll({ fill: am5.color("#707070"), }); //create axes var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, { text: "State", fontWeight: "500", height: am5.percent(70), categoryField: "State", renderer: am5xy.AxisRendererY.new(root, {}), tooltip: am5.Tooltip.new(root, {}), })); var yAxis2 = chart.yAxes.unshift(am5xy.ValueAxis.new(root, { // <--- HERE text: "Clicks", fontWeight: "500", height: am5.percent(30), min: 0, //min 'hint', but not forced //strictMinMax: true, //forces the min/max //extraMax: 0.1, //extra 10% to the value range which acts as 'padding' to the yaxis renderer: am5xy.AxisRendererY.new(root, {}) })); //the order is top to bottom ends up bottom to top on the chart yAxis.data.setAll([ { State: "Idle" }, { State: "Active" } ]); //y-axis dash lines var yRenderer = yAxis.get("renderer"); yRenderer.grid.template.setAll({ strokeDasharray: [6] }); var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "second", count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}), tooltip: am5.Tooltip.new(root, {}), tooltipDateFormat: "EEE, MMM dd @ h:mm:ss a" })); //x-axis dash lines var xRenderer = xAxis.get("renderer"); xRenderer.grid.template.setAll({ strokeDasharray: [6], }); //series var series = chart.series.push(am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, openValueXField: "Start", valueXField: "End", categoryYField: "State", sequencedInterpolation: true, tooltip: am5.Tooltip.new(root, { //labelText: "[bold {Color} fontSize: 16px]{State}[/]\n[bold]Start:[/] {openValueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '@' h':'mm':'ss a\")}\n[bold]End:[/] {valueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '@' h':'mm':'ss a\")}\n[bold]Duration:[/] {Duration.formatDuration(\"hh'h' mm'm' ss's'\")}", labelText: "[bold]Start:[/] {openValueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '@' h':'mm':'ss a\")}\n[bold]End:[/] {valueX.formatDate(\"EEE',' MM'/'dd'/'yyyy '@' h':'mm':'ss a\")}\n[bold]Duration:[/] {Duration.formatDuration(\"hh'h' mm'm' ss's'\")}", getFillFromSprite: false }) })); series.get("tooltip").get("background").setAll({ fill: am5.color("#ffffff"), fillOpacity: 1, strokeWidth: 2, stroke: am5.color("#bbbbbb"), }); //series columns series.columns.template.setAll({ fillOpacity: 1, stroke: 0, strokeWidth: 0, //doesn't seem to work use 'stroke:0' tooltipText: "{State}:\n[bold]{openValueX}[/] - [bold]{valueX}[/]" }); series.columns.template.adapters.add("fill", function (text, target, key) { //console.log(target); //have to check for empty //if(target.dataItem) { if(target.dataItem.dataContext.State == "Active") { return am5.color("#7bc07b"); //active } else { return am5.color("#55bfe6"); //idle } //} else { // return null; //} }); //series var series2 = chart.series.push(am5xy.ColumnSeries.new(root, { name: "Clicks", fill: am5.color("#679fd0"), xAxis: xAxis, yAxis: yAxis2, valueYField: "Clicks", valueXField: "Timestamp", tooltip: am5.Tooltip.new(root, { labelText: "{valueY}", getFillFromSprite: false }) })); series2.get("tooltip").get("background").setAll({ fill: am5.color("#ffffff"), fillOpacity: 1, strokeWidth: 2, stroke: am5.color("#bbbbbb"), }); //series columns series2.columns.template.setAll({ fillOpacity: 1, stroke: 0, strokeWidth: 0, //doesn't seem to work use 'stroke:0' }); series2.get("tooltip").label.adapters.add("text", function (text, target, key) { //console.log(target); //have to check for empty if(target.dataItem) { return "Total: [bold]{Clicks}[/]\nTimestamp: [bold]{Timestamp}[/]"; } else { return null; } }); //title var title = chart.children.unshift(am5.Label.new(root, { fontSize: 12, textAlign: "left", x: am5.percent(0), y: am5.percent(0), marginTop: 0, marginRight: 0, marginBottom: 30, marginLeft: 0, paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0, text: "some label" })); //cursor var cursor = chart.set("cursor", am5xy.XYCursor.new(root, { snapToSeries: [ series ], snapToSeriesBy: "x", behavior: "zoomX" })); cursor.lineX.set("visible", false); cursor.lineY.set("visible", false); //formatting series.data.processor = am5.DataProcessor.new(root, { dateFields: ["Start", "End"], dateFormat: "xxxxxxxxxxxxx" }); //formatting series2.data.processor = am5.DataProcessor.new(root, { numericFields: ["Clicks"], dateFields: ["Timestamp"], dateFormat: "xxxxxxxxxxxxx" }); //scrollbar chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal", marginTop: 0, marginRight: 0, marginBottom: 30, marginLeft: 0, paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0, })); //exporting exporting = am5plugins_exporting.Exporting.new(root, { dataSource: data, dataFields: { State: 'State', Start: 'Start', End: 'End', Duration: 'Duration' }, dateFields: ["Start", "End"], dateFormat: "MM/dd/yyyy hh:mm:ss a", durationFields: ["Duration"], durationFormat: "hh'h' mm'm' ss's'", filePrefix: 'User Activity' }); //add data series.data.setAll(data); series2.data.setAll(mousekeys); //make stuff animate on load series.appear(1000); series2.appear(1000); chart.appear(1000, 100);

 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: 500px; }

 <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <script src="https://cdn.amcharts.com/lib/5/xy.js"></script> <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> <script src="https://cdn.amcharts.com/lib/5/locales/en_US.js"></script> <script src="https://cdn.amcharts.com/lib/5/plugins/exporting.js"></script> <div id="chartdiv"></div>

You can see a column if you use the horizontal scrollbar and go completely to the left. The reason is there:

var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
  baseInterval: { timeUnit: "second", count: 1 },
  // ...
}));

Your interval is tiny (one second), so your column width is tiny. You have to tweak timeUnit or count in baseInterval if you want a wider column.