all my code is:
<template>
<div class="hello" ref="chartdiv"></div>
</template>
<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
export default {
name: "HelloWorld",
mounted() {
let root = am5.Root.new(this.$refs.chartdiv);
root.setThemes([am5themes_Animated.new(root)]);
let chart = root.container.children.push(
am5xy.XYChart.new(root, {
panY: false,
layout: root.verticalLayout,
})
);
var colors = chart.get("colors");
let data = [
{
category: "a1",
fromDate: "1401-01-01 08:00",
toDate: "1401-01-01 10:00",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(0), 0),
},
},
{
category: "a1",
fromDate: "1401-01-01 12:00",
toDate: "1401-01-01 15:00",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(0), 0.4),
},
},
{
category: "a1",
fromDate: "1401-01-01 15:30",
toDate: "1401-01-01 21:30",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(0), 0.8),
},
},
{
category: "a1",
fromDate: "1401-01-01 09:00",
toDate: "1401-01-01 12:00",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(2), 0),
},
},
{
category: "a1",
fromDate: "1401-01-01 13:00",
toDate: "1401-01-01 17:00",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(2), 0.4),
},
},
{
category: "a1",
fromDate: "1401-01-01 11:00",
toDate: "1401-01-01 16:00",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(4), 0.3),
},
},
{
category: "a2",
fromDate: "1401-01-01 16:00",
toDate: "1401-01-01 19:00",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(3), 0.4),
},
},
{
category: "a3",
fromDate: "1401-01-01 16:00",
toDate: "1401-01-01 20:00",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(5), 0),
},
},
{
category: "a4",
fromDate: "1401-01-01 20:30",
toDate: "1401-01-02 00:00",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(6), 0.6),
},
},
{
category: "javad",
fromDate: "1401-01-01 13:00",
toDate: "1401-01-02 00:00",
columnSettings: {
fill: am5.Color.brighten(colors.getIndex(8), 0.7),
},
},
];
chart.set("direction", "rtl");
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "category",
// height: 200,
fontSize: 50,
renderer: am5xy.AxisRendererY.new(root, { inversed: true }),
// align: "right",
textAlign: "right",
tooltip: am5.Tooltip.new(root, {
themeTags: ["axis"],
textAlign: "right",
animationDuration: 200,
}),
})
);
yAxis.data.setAll([
{ category: "a1", direction: "rtl", align: "right" },
{ category: "a2", direction: "rtl", align: "right" },
{ category: "a3", direction: "rtl", align: "right" },
{ category: "a4", direction: "rtl", align: "right" },
{
category: "javad",
direction: "rtl",
align: "right",
fontSize: 50,
textAlign: "right",
},
]);
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
baseInterval: { timeUnit: "minute", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(
am5xy.ColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "fromDate",
valueXField: "toDate",
categoryYField: "category",
sequencedInterpolation: true,
})
);
series.columns.template.setAll({
templateField: "columnSettings",
strokeOpacity: 0,
// direction: "rtl",
// width: 5,
align: "right",
tooltipText:
"{category}: {openValueX.formatDate('yyyy/MM/dd HH:mm')} - {valueX.formatDate('yyyy/MM/dd HH:mm')}",
});
series.data.processor = am5.DataProcessor.new(root, {
dateFields: ["fromDate", "toDate"],
dateFormat: "yyyy/MM/dd HH:mm",
});
series.data.setAll(data);
// Add scrollbars
chart.set(
"scrollbarX",
am5.Scrollbar.new(root, {
orientation: "horizontal",
})
);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
},
beforeDestroy() {
if (this.root) {
this.root.dispose();
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
width: 90%;
height: 500px;
}
</style>