I've applied code like this:
var series = chart.series.push(new am4charts.LineSeries());
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#fff");
series.tooltip.border.fill = am4core.color("#000");
series.tooltip.label.fill = am4core.color("#000");
series.tooltipText = "{date.formatDate('d MMM, yyyy')}: [bold]{value}";
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
But somehow tooltip is not loaded with border color.
In amcharts the field for the border color is stroke. You can set it eiter on the tooltip itself, on the tooltip.background or on the tooltip.label. For example like this:
series.tooltip.background.stroke = am4core.color("#000");
You also can change the border width using strokeWidth:
series.tooltip.background.strokeWidth = 2;
Here is a working code pen.
Related
I'm looking to do a chart like this one using amcharts 4.
The question linked only supports AmCharts 3, and AmCharts 4 has no .addGraph() functionality. Is it possible to do this using XYCharts()?
const chart = new am4core.create(chartDiv.current, am4charts.XYChart);
chart.dataProvider = chartData;
chart.categoryField = 'category';
chart.rotate = true;
chart.columnWidth = 1;
// AXES
// Category
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = 'start';
// value
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.stackType = '100%';
valueAxis.gridAlpha = 0;
valueAxis.autoGridCount = false;
valueAxis.gridCount = 20;
valueAxis.axisAlpha = 1;
// GRAPHS
// firstgraph
const graph = new am4charts.XYChart();
graph.labelText = 'Bad';
graph.valueField = 'bad';
graph.type = 'column';
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.fillColors = ['#d05c4f', '#ffb2a8'];
chart.createChild(graph);
I tried chart.createChild(), but that appears to be for containers like rectangles. How would I achieve the same functionality using AmCharts 4?
A gauge chart is essentially a stacked column(bar) chart of only 1 type of series data. I've modified stacked column chart to look like the gauge chart linked in the question.
working demo: https://codepen.io/rabelais88/pen/RwMGxxJ
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<style>
#chartdiv {
width: 100%;
height: 400px;
}
</style>
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [
{
type: "gauge",
bad: 2,
good: 7,
worst: 1
}
];
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "type";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
// forcefully expand axis to make it look like gauge
categoryAxis.renderer.cellStartLocation = -0.12;
categoryAxis.renderer.cellEndLocation = 1.12;
categoryAxis.visible = false;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
// remove inner margins by syncing its start and end with min and max
valueAxis.min = 0;
valueAxis.max = 10;
// Create series
function createSeries(field, name, stacked) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "type";
series.name = name;
series.columns.template.tooltipText = "{name}: [bold]{valueX[/]}";
series.stacked = stacked;
// add inner text
const bullet = series.bullets.push(new am4charts.LabelBullet());
bullet.label.text = "{name}";
bullet.locationX = 0.5;
}
createSeries("good", "Good", false); // base of stacked column
createSeries("bad", "Bad", true);
createSeries("worst", "Worst", true);
// Add legend
chart.legend = new am4charts.Legend();
Edit
I've added hand as requested.
added another a column and designated it as a non-cluster to make it ignore the grid layout.
set the column's interaction and style as hidden and attached a bullet shape that looks like a 'clock hand'.
it includes a lot of manual position manipulation; due to the limit of a pre-made charts.
On a side note, normally if a chart has anything unusual element, it's better to implement it with D3.js by scratch; fiddling with a pre-made chart will bring too much side effects later.
// adding a pointing hand(clock hand) as annotation
// draw pointing hand
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "current";
series.dataFields.categoryY = "type";
series.fillOpacity = 0;
// hide shape
series.stroke = am4core.color("rgba(0,0,0,0)");
// make it ignore other columns
series.clustered = false;
// disable tooltips
series.interactionsEnabled = false;
const bullet = series.bullets.push(new am4core.Triangle());
bullet.width = 30;
bullet.height = 30;
bullet.fill = am4core.color("black");
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "top";
bullet.rotation = 180;
// manually change its position
bullet.dy = -65;
const label = series.bullets.push(new am4charts.LabelBullet());
label.label.text = "current: {valueX}";
label.label.dy = -30;
updated working demo with pointing hand(clock hand): https://codepen.io/rabelais88/pen/mdxOyYQ
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.background.image = am4core.image("/static/img/bar-chart.png")
In Amchart i am trying to add background image over my chart.
But it is not working while i am doing this.
Please take a look if there is any way
I modified the watermark tutorial
// Add watermark
var watermark = new am4core.Image();
watermark.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/cat.svg";
chart.plotContainer.children.push(watermark);
watermark.align = "right";
watermark.valign = "bottom";
watermark.opacity = 0.3;
watermark.marginRight = 10;
watermark.marginBottom = 5;
like this:
// Add watermark
var watermark = new am4core.Image();
watermark.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/cat.svg";
chart.plotContainer.children.push(watermark);
watermark.align = "center";
watermark.valign = "bottom";
watermark.opacity = 0.3;
watermark.height = 200;
watermark.width = 200;
Based on what do you need you might have to modify opacity, height and width.
I'm currently using a Stacked XYChart in amCharts 4, and I'm only displaying a single bar:
I'm trying to figure out how to get an outline around the entire bar - something like this:
I've tried adding the stroke (and strokeWidth & strokeOpacity) property to just about everything - the series, the yAxes, xAxes, etc, but none of them produce the result I'm hoping for. I feel like there's something obvious I'm missing, so any help would be greatly appreciated.
Since you mentioned that you're only displaying one column and assuming this is a 100% stacked chart, the best you can do is set a stroke on the chart's plotContainer:
chart.plotContainer.stroke = "#000000"
Note that your series columns need to have their height set 100% so it will fully expand inside the container (series.columns.template.height = am4core.percent(100)).
Demo below:
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"year": "2016",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
}];
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.plotContainer.stroke = "#000000";
chart.plotContainer.strokeWidth = 5;
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.opacity = 0;
categoryAxis.renderer.labels.template.disabled = true;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.calculateTotals = true;
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.dataFields.valueXShow = "totalPercent";
series.stacked = true;
series.name = name;
series.columns.template.height = am4core.percent(100);
}
createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");
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: 200px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
I think this is what we can achieve. It won't give continuous stroke as per your requirement.
You might have tried this.
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.stacked = true;
series.name = name;
series.stroke = am4core.color("#000");
var labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.locationX = 0.5;
labelBullet.label.text = "{valueX}";
labelBullet.label.fill = am4core.color("#fff");
}
Code base - https://jsfiddle.net/sarunuk/dyohfr68/1/
I have problem to make my tooltip in amchart have to look nice, I just want to make that tooltip not struck down by other tooltip, this is my screen shoot amchart tooltip
how can I solve my problem? this is my code with amchart
< style > #chartdiv {
height: 280 px;
position: relative;
} < /style>
<!-- Chart code -->
< script >
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_kelly);
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Enable chart cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
// Enable scrollbar
chart.scrollbarX = new am4core.Scrollbar();
// Add data
chart.data = <?php
echo $realisasi;
?>;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dataFields.category = "Date";
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.dateFormatter.inputDateFormat = "yyyy-MM-dd";
dateAxis.renderer.minGridDistance = 40;
dateAxis.tooltipDateFormat = "MMM dd, yyyy";
dateAxis.dateFormats.setKey("day", "dd");
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.tooltipText = "{date}\n[bold font-size: 17px]realisasi: {valueY}[/]";
series.tooltip.valign = "middle";
series.dataFields.valueY = "realisasi";
series.dataFields.dateX = "date";
series.strokeDasharray = 3;
series.strokeWidth = 2
series.strokeOpacity = 0.3;
series.strokeDasharray = "3,3"
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.strokeWidth = 2;
bullet.stroke = am4core.color("#fff");
bullet.setStateOnChildren = true;
bullet.propertyFields.fillOpacity = "opacity";
bullet.propertyFields.strokeOpacity = "opacity";
var hoverState = bullet.states.create("hover");
hoverState.properties.scale = 1.7;
function createTrendLine(data) {
var trend = chart.series.push(new am4charts.LineSeries());
trend.dataFields.valueY = "pakta";
trend.dataFields.dateX = "date";
trend.strokeWidth = 2
trend.stroke = trend.fill = am4core.color("#c00");
trend.data = data;
var bullet = trend.bullets.push(new am4charts.CircleBullet());
bullet.tooltipText = "{date}\n[bold font-size: 17px]pakta: {pakta}[/]";
bullet.strokeWidth = 2;
bullet.stroke = am4core.color("#fff")
bullet.circle.fill = trend.stroke;
var hoverState = bullet.states.create("hover");
hoverState.properties.scale = 1.7;
return trend;
};
// createTrendLine();
createTrendLine(<?php
echo $pagu;
?>);
}); // end am4core.ready()
< /script>
<!-- HTML -->
< div id = "chartdiv" > < /div>
Help me to solve my problem, or whether other solution to make my two tooltip is not struck down.
You didn't specify any sample data on your code, but try replacing valign:
series.tooltip.valign = "middle";
with pointerOrientation:
series.tooltip.pointerOrientation = "down";
I had implemented the follow stacked column chart below:
As you can see, some bar does not appear the label name.
I tried increase the width from this chart and now I can see the label from bars (look the new print below)
Bus now I cannot see all items. i think that I need add a scroll bar.
Could you please help me? Basically I would like to add a X-axis scroll at this chart.
Note:
I'm using the amchart version 4.
I'm using this example: https://www.amcharts.com/demos/stacked-column-chart/
follow my code below.
method used to build the chart
private buildChart(dataChart) {
/* Chart code */
// Themes begin
am4core.useTheme(am4themes_animated);
// Create chart instance
const chart = am4core.create('chartdiv', am4charts.XYChart);
for (const data of dataChart) {
chart.data.push(data);
}
console.log(chart);
// Create axes
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = 'model';
categoryAxis.renderer.grid.template.location = 0;
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;
// Create series
function createSeries(field, name) {
// Set up series
const series = chart.series.push(new am4charts.ColumnSeries());
series.name = name;
series.dataFields.valueY = field;
series.dataFields.categoryX = 'model';
series.sequencedInterpolation = true;
// Make it stacked
series.stacked = true;
// Configure columns
series.columns.template.width = am4core.percent(60);
series.columns.template.tooltipText = '[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}';
// Add label
const labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = '{valueY}';
labelBullet.locationY = 0.5;
return series;
}
createSeries('DISCONNECTED', 'DISCONNECTED');
createSeries('AVAILABLE', 'AVAILABLE');
// Legend
chart.legend = new am4charts.Legend();
}
html code
<div class="row">
<div class="col-md-12 teste">
<app-card [title]="'Available Devices'" >
<div id="chartdiv" [style.height]="'400px'" [style.width]="'4000px'"></div>
</app-card>
</div>
I found one solution for it. follow below:
// I use the scrollbarX to create a horizontal scrollbar
chart.scrollbarX = new am4core.Scrollbar();
// here I set the scroolbar bottom the chart
chart.scrollbarX.parent = chart.bottomAxesContainer;
//here I chose not to show the startGrip (or button that expand the series from chart)
chart.scrollbarX.startGrip.hide();
chart.scrollbarX.endGrip.hide();
// here I set the start and end scroolbarX series that I would like show in chart initially
chart.scrollbarX.start = 0;
chart.scrollbarX.end = 0.25;
// here I chose not to show the zoomOutButton that appear above from chart
chart.zoomOutButton = new am4core.ZoomOutButton();
chart.zoomOutButton.hide();
So my full method that build chart is:
private buildChart(dataChart) {
/* Chart code */
// Themes begin
am4core.useTheme(am4themes_animated);
// Create chart instance
const chart = am4core.create('chartdiv', am4charts.XYChart);
for (const data of dataChart) {
chart.data.push(data);
}
// Create axes
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = 'model';
categoryAxis.renderer.grid.template.location = 0;
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;
// Create series
function createSeries(field, name) {
// Set up series
const series = chart.series.push(new am4charts.ColumnSeries());
series.name = name;
series.dataFields.valueY = field;
series.dataFields.categoryX = 'model';
series.sequencedInterpolation = true;
// Make it stacked
series.stacked = true;
// Configure columns
series.columns.template.width = am4core.percent(60);
series.columns.template.tooltipText = '[bold]{name}[/]\n[font-size:15px]{categoryX}: {valueY}';
// Add label
const labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = '{valueY}';
labelBullet.locationY = 0.5;
return series;
}
createSeries('DISCONNECTED', 'DISCONNECTED');
createSeries('AVAILABLE', 'AVAILABLE');
// Legend
chart.legend = new am4charts.Legend();
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.parent = chart.bottomAxesContainer;
chart.scrollbarX.startGrip.hide();
chart.scrollbarX.endGrip.hide();
chart.scrollbarX.start = 0;
chart.scrollbarX.end = 0.25;
chart.zoomOutButton = new am4core.ZoomOutButton();
chart.zoomOutButton.hide();
}
Follow the print below showing how it got