Establishing a minimum width for the value of zero in AmCharts column series by customizing the bullet labels

Here's an interesting example where I have arranged column series with bullet labels. However, you may notice that there are some 0 values present as well. My goal is to establish a minimum width for the series so that even if the value is small or 0, the bullet label remains visible.

For instance, take a look at the series for the year 2017, which starts with a 0. Unfortunately, the label is not fully visible in this case.

/**
 * ---------------------------------------
 * This demonstration was crafted using amCharts 4.
 * 
 * For more details, please visit:
 * https://www.amcharts.com/
 * 
 * Comprehensive documentation can be found at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Initializing themes
am4core.useTheme(am4themes_animated);
// Theme settings complete

// Generating chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Adding data
chart.data = [{
  "year": "2016",
  "europe": 1.5,
  "namerica": 1.5,
  "asia": 1.3,
  "lamerica": 0.3,
  "meast": 0.2,
  "africa": 0
}, {
  "year": "2017",
  "europe": 0,
  "namerica": 1.8,
  "asia": 1.4,
  "lamerica": 0.3,
  "meast": 0.3,
  "africa": 0.1
}, {
  "year": "2018",
  "europe": 1.9,
  "namerica": 2.0,
  "asia": 0,
  "lamerica": 0.4,
  "meast": 0.3,
  "africa": 0.1
}];

chart.legend = new am4charts.Legend();
chart.legend.position = "right";

// Establishing axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.opacity = 0;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.ticks.template.strokeOpacity = 0.5;
valueAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
valueAxis.renderer.ticks.template.length = 10;
valueAxis.renderer.line.strokeOpacity = 0.5;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.minGridDistance = 40;

// Creating series
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.minWidth = `100px`;
  
  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.locationX = 0.5;
  labelBullet.label.text = "{valueX}";
  labelBullet.label.fill = am4core.color("#fff");
}

createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");

chart.legend.position = 'bottom';
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/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>

javascriptchartsamchartsamcharts4

Answer №1

It's not possible to set a minimum width/height for columns in a chart because the size is determined by the data, and forcing a minimum size could distort the values.

A more effective approach is to hide labels that are too large by using hideOversized with label bullets and utilize tooltips along with a chart cursor for better data representation.

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);

// Adding sample data
chart.data = [{
  "year": "2016",
  "europe": 1.5,
  "namerica": 1.5,
  "asia": 1.1,
  "lamerica": 0.3,
  "meast": 0.2,
  "africa": 0
}, {
  "year": "2017",
  "europe": 0,
  "namerica": 1.7,
  "asia": 1.2,
  "lamerica": 0.3,
  "meast": 0.3,
  "africa": 0.1
}, {
  "year": "2018",
  "europe": 1.8,
  "namerica": 1.9,
  "asia": 0,
  "lamerica": 0.3,
  "meast": 0.3,
  "africa": 0.1
}];

chart.legend = new am4charts.Legend();
chart.legend.position = "right";

// Setting up axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.opacity = 0;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.ticks.template.strokeOpacity = 0.5;
valueAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
valueAxis.renderer.ticks.template.length = 10;
valueAxis.renderer.line.strokeOpacity = 0.5;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.minGridDistance = 40;

// Creating series
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.tooltipText = "{name}: {valueX}";
  
  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.label.hideOversized = true;
  labelBullet.locationX = 0.5;
  labelBullet.label.text = "{valueX}";
  labelBullet.label.fill = am4core.color("#fff");
}

createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");

chart.legend.position = 'bottom';
chart.cursor = new am4charts.XYCursor();
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/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>

Answer №2

Here is an alternative solution that offers a fresh perspective or you might want to consider adjusting the label positioning.

/**
 * ---------------------------------------
 * This code snippet demonstrates the usage of amCharts 4 library.
 * 
 * For detailed information, please visit:
 * https://www.amcharts.com/
 * 
 * Check out the documentation at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes initialization
am4core.useTheme(am4themes_animated);
// End of themes

// Initialize chart
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Populate data
chart.data = [{
  "year": "2016",
  "europe": 1.5,
  "namerica": 1.5,
  "asia": 1.1,
  "lamerica": 0.3,
  "meast": 0.2,
  "africa": 0
}, {
  "year": "2017",
  "europe": 0,
  "namerica": 1.7,
  "asia": 1.2,
  "lamerica": 0.3,
  "meast": 0.3,
  "africa": 0.1
}, {
  "year": "2018",
  "europe": 1.8,
  "namerica": 1.9,
  "asia": 0,
  "lamerica": 0.3,
  "meast": 0.3,
  "africa": 0.1
}];

chart.legend = new am4charts.Legend();
chart.legend.position = "right";

// Set up axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.opacity = 0;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.ticks.template.strokeOpacity = 0.5;
valueAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
valueAxis.renderer.ticks.template.length = 10;
valueAxis.renderer.line.strokeOpacity = 0.5;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.minGridDistance = 40;

// Create series function
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.minWidth = `100px`;
  
  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.locationX = 0.5;
  labelBullet.label.text = "{valueX}";
  labelBullet.label.fill = am4core.color("#fff");
  labelBullet.label.x= 4;
}

createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");

chart.legend.position = 'bottom';
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/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Requiring three parameters, yet received four

Encountering an error in the dashboard.tsx file while trying to implement a line of code: "const { filteredEvents, stats, tableApps, formattedDate } = filterData(dataAll, Prefix, listApp, dateSelected);" The issue arose with the dateSelected parameter resu ...

javascriptreactjsnode.jsnext.js

What is the best way to use AJAX to send a downloadable file in WordPress?

Currently working on developing a WordPress plugin and could use some assistance ...

javascriptphpjqueryajaxwordpress

Fetching weather data from the Darksky.com API in JSON format

My goal is to retrieve weather data in JSON format from the Darksky.com API. To do this, I first successfully obtained my latitude and longitude using the freegoip.com API. However, the Darksky API requires both longitude and latitude before it can provid ...

javascriptjqueryjsonapi

Example of fetching Pubnub history using AngularJS

I am not a paid PubNub user. I am utilizing the example code for an Angular JS basic chat application from PubNub, and I want to access the chat history. This specific example can be found on the PubNub website. git clone https://github.com/stephenlb/an ...

javascriptangularjspubnub

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...

javascriptjqueryhtmlcss

Error SCRIPT1002 was encountered in the vendor.js file while using Angular 8 on Internet Explorer 11

Having trouble getting Angular to function properly in IE 11. I've tried all the solutions I could find online. The errors I'm encountering are as follows: SCRIPT1002: Syntax error File: vendor.js, Line: 110874, Column: 40 At line 110874 args[ ...

javascriptangulartypescriptecmascript-6internet-explorer-11

Trigger next animation after the completion of current animation using Jquery animate callback

Is there a simpler way to achieve this task? var index = 0; while (index < 5) { $(this).find(".ui-stars-star-on-large:eq(" + index + ")").animate({ width: w + 'px' }, 200, "swing"); index++; } ...

javascriptjquery

Is there a way to run JavaScript using Selenium and extract information at the same time?

Greetings and thank you for taking the time to read this. I am currently working on a parser that scans hundreds of websites to check if they have a specific module or plugin installed. The main challenge I am facing is determining whether a website utili ...

javascriptpythonparsingselenium

What is the reason behind RxJs recording 2 events during a long keypress?

I'm in the process of creating a user interface that reacts to keyPress events. Utilizing technologies like Angular and RxJS allows me to identify specific events. [Latest packages installed] The code structure appears as follows this.keyboard$ ...

javascriptangularrxjs

Ways to disable the caching feature in Google Chrome

When I am working on CSS and JS around a page, I need to disable the cache mechanism in Google Chrome browser. A trick is to open Chrome DevTools, which automatically disables the cache mechanism (you can configure this in the settings section). Are ther ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

I am receiving a 401 error when attempting to verify the token following a successful login

I've been working on a small project utilizing VueJS, Vue Router, and Laravel for the backend. Despite several attempts, I haven't been successful in implementing navigation guards. My login component is functioning properly. Here's my log ...

javascriptvue.jsvue-router

Despite setting allowHalfOpen to True, Node.js: Client still disconnects from Server

I've been working on a Node.js script that involves creating a server if a specific port is available, or connecting to an existing server if the port is already in use. To achieve this, I am using a recursive approach based on a reference from this l ...

javascriptnode.jssocketsserverclient

Exploring Date Comparisons in AngularJS

Currently, I am in the process of developing a web application using AngularJS and Rails. One of the features involves creating bookings through a bookings function. In the dashboard section of the app, I aim to have two tabs - one for Current Bookings and ...

javascriptruby-on-railsangularjs

Sending data through the backbone form?

Whenever the submit button is clicked, a post request should be made to the server with input data and it will return a JSON object. I am unsure where to define the success function and how to receive the response object. Is this the correct way to call a ...

javascriptjquerybackbone.js

Tips for uploading images, like photos, to an iOS application using Appium

I am a beginner in the world of appium automation. Currently, I am attempting to automate an iOS native app using the following stack: appium-webdriverio-javascript-jasmine. Here is some information about my environment: Appium Desktop APP version (or ...

javascriptiostypescriptappiumwebdriver-io

Tips for preventing conflicts between variables and functions in JavaScript (no need for a jQuery plugin)

How can I prevent variable and function conflicts in Javascript without relying on jQuery plugins? I am interested in creating my own functions but want to avoid conflicts. I believe using function scope, where functions are used solely for the purpose of ...

javascriptjquerynamespacesprototypal-inheritance

What is the reason for the text not being written continuously in the textfield?

Looking to create a page for collecting user information. This is a Codesandbox.io page where the issue arises. https://codesandbox.io/s/material-demo-z1x3q?fontsize=14 When I try to input "d" continuously in the 성별* textfield, I can only enter "d" ...

javascriptreactjsgraphqlmaterial-ui

Numbering the items in ng-repeat directive

I am facing a challenge with my AngularJS directive that is recursively nested within itself multiple times. The issue lies in the fact that the names of items in ng-repeat conflict with those in the outer element, causing it to malfunction. To illustrate ...

javascriptangularjsnaming

Can you explain the reference point used in the `drawImage()` function on a canvas?

Here is an inquiry concerning the usage of the drawImage() function. var x = (i-j)*(img[0].height/2) + (ctx.canvas.width/2)-(img[0].width/2); var y = (i+j)*(img[0].height/4); abposx = x + offset_x; abposy = y + offset_y; ctx.drawImage ...

javascriptcanvas

In what rare scenarios does JS in string concatenation within insertAdjacentHTML fail to evaluate?

On a public website that I do not own, there is a piece of JavaScript code that writes a magic pixel image to the page to call an API I provided. Here's the snippet of code: n.insertAdjacentHTML('beforebegin', '<img src=& ...

javascripthtml