Skip to content

Instantly share code, notes, and snippets.

@chinthaka-dinadasa
Created May 4, 2019 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chinthaka-dinadasa/d68596205f3bd5d86550908ccdaee492 to your computer and use it in GitHub Desktop.
Save chinthaka-dinadasa/d68596205f3bd5d86550908ccdaee492 to your computer and use it in GitHub Desktop.
BarChartImageBase.vue
<template>
<div class="chart-window">
<div id="chart-div"></div>
<div id="buttons">
<button @click="generateNewValues()">Click Me</button>
</div>
</div>
</template>
<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
am4core.useTheme(am4themes_animated);
export default {
name: "BarChartImageBase",
mounted() {
this.processBaseChart();
},
data: () => ({
dataForChart: {
data: [{
"name": "Monica",
"steps": 45688
}, {
"name": "Joey",
"steps": 35781
}, {
"name": "Ross",
"steps": 25464
}, {
"name": "Phoebe",
"steps": 18788
}, {
"name": "Rachel",
"steps": 15465
}, {
"name": "Chandler",
"steps": 11561
}]
},
}),
methods: {
generateNewValues() {
this.dataForChart.data = [{
"name": "Monica",
"steps": 80000
}, {
"name": "Joey",
"steps": 80000
}, {
"name": "Ross",
"steps": 80000
}, {
"name": "Phoebe",
"steps": 18788
}, {
"name": "Rachel",
"steps": 15465
}, {
"name": "Chandler",
"steps": 11561
}]
},
processBaseChart() {
this.chart = am4core.create("chart-div", am4charts.XYChart);
this.chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
this.chart.paddingBottom = 30;
this.chart.data = this.dataForChart.data
let categoryAxis = this.chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.strokeOpacity = 0;
categoryAxis.renderer.minGridDistance = 10;
categoryAxis.renderer.labels.template.dy = 35;
categoryAxis.renderer.tooltip.dy = 35;
let valueAxis = this.chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = false;
valueAxis.renderer.labels.template.fillOpacity = 0.3;
valueAxis.renderer.grid.template.strokeOpacity = 0;
valueAxis.min = 0;
valueAxis.cursorTooltipEnabled = false;
valueAxis.renderer.baseGrid.strokeOpacity = 0;
let series = this.chart.series.push(new am4charts.ColumnSeries);
series.dataFields.valueY = "steps";
series.dataFields.categoryX = "name";
series.dataFields.imageX = "image";
series.tooltipText = "{valueY.value}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.dy = -6;
series.columnsContainer.zIndex = 100;
let columnTemplate = series.columns.template;
columnTemplate.width = am4core.percent(50);
columnTemplate.maxWidth = 66;
columnTemplate.column.cornerRadius(30, 30, 10, 10);
columnTemplate.strokeOpacity = 0;
series.heatRules.push({
target: columnTemplate,
property: "fill",
dataField: "valueY",
min: am4core.color("#e5dc36"),
max: am4core.color("#5faa46")
});
series.mainContainer.mask = undefined;
let cursor = new am4charts.XYCursor();
this.chart.cursor = cursor;
cursor.lineX.disabled = true;
cursor.lineY.disabled = true;
cursor.behavior = "none";
let bullet = columnTemplate.createChild(am4charts.CircleBullet);
bullet.circle.radius = 30;
bullet.valign = "bottom";
bullet.align = "center";
bullet.isMeasured = true;
bullet.mouseEnabled = false;
bullet.verticalCenter = "bottom";
bullet.interactionsEnabled = false;
let hoverState = bullet.states.create("hover");
let outlineCircle = bullet.createChild(am4core.Circle);
outlineCircle.adapter.add("radius", function (radius, target) {
let circleBullet = target.parent;
return circleBullet.circle.pixelRadius + 10;
})
let image = bullet.createChild(am4core.Image);
image.width = 60;
image.height = 60;
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
image.adapter.add("href", function (href, target) {
let dataItem = target.dataItem;
if (dataItem) {
return "https://www.amcharts.com/wp-content/uploads/2019/04/" + dataItem.categoryX.toLowerCase() + ".jpg";
}
})
image.adapter.add("mask", function (mask, target) {
let circleBullet = target.parent;
return circleBullet.circle;
})
let labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "[bold]{valueY.value}";
labelBullet.label.dy = -20;
}
}
}
</script>
<style scoped>
.chart-window {
width: 100%;
height: 100%;
}
#chart-div {
width: 100%;
height: 80%;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment