Enhance tick labels in C3.js with supplementary information

I need a specific format for the tick:

               tick: {
                    fit: true,
                    multiline: false,
                    outer: false,
                    format: function (x) {
                        var value = this.api.categories()[x];
                        if(value.length > 5)
                            return value.substring(0,5)+"...";
                        else
                            return value;
                    }
                },

value is a unique attribute. However, I need to truncate it to only show the first 5 characters.

Additionally, I have a click event on the ticks:

_.each(this.chart.element.querySelectorAll('svg g.c3-axis-x .tick text tspan'), (el) => {
            el.onclick = (e) => this.someFunction(e)
        })

In the someFunction(), I want to retrieve the unique attribute in order to fetch data specific to the current tick.

Previously, I obtained this attribute using angular.element(e.target).text(), but sometimes it might be cropped. Is there a way to get the current index or another method to retrieve the full text?

Answer №1

To extract data/indices from elements within a c3 chart, it is recommended to utilize d3 since that is the underlying framework used by c3 for construction. It's uncertain if using angular would interfere with this capability, as I do not have experience with it.

One suggestion worth experimenting with is revisiting your previous question (C3 js : large axis label) and modifying a portion of my response to enable clicking functionality in the onrendered function:

onrendered: function () {
    var self = this;

    d3.select(this.config.bindto)
        .selectAll(".c3-axis-x .tick text")
        .on ("click", function(d) {
           console.log ("data val", d, "gives us ", self.api.categories()[d])
            // perform desired actions here
        })
}

http://jsfiddle.net/05hsk6yh/3/

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

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

I've been attempting to export a variable in the TensorFlow posenet model while it's running in the Chrome browser using the code snippet below. After going through various discussions, I discovered that exporting a variable with fswritefile in t ...

Transforming background color upon click using Vue

I'm trying to change the background color from blue to a different color when a button is clicked. However, the code I've written so far doesn't seem to be working. HTML <script src="https://cdn.jsdelivr.net/npm/vue"></script> ...

AngularJS routing is disrupted by html5mode

Encountering a unique issue while using html5Mode with ngRoute. Here is the relevant snippet of code: (function () { var config = function ($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'h ...

Effective ways to conduct Protractor testing on angular-ui-Selectize components

I am exploring how to test a user creation form that includes multiple dropdown controls, specifically angular-ui-select elements. After searching for documentation on selecting items from these dropdowns, I came up empty-handed. This is an excerpt from ...

Is there a way for me to showcase information?

I am currently facing an issue with displaying user information retrieved from my database using AngularJS. The code snippet below shows how I am trying to get the user data: angular.module('listController',[]) .controller('listCtrl' ...

Create a layout with two rows of two buttons in HTML aligned to the right side while maintaining the left side's

I am currently working on designing a menu for my webpage that includes four buttons. My goal is to have two buttons displayed at the top of the page and two buttons displayed at the bottom. To achieve this, I have written the following CSS code: .navButt ...

Is it possible to utilize $(document).ready() within an ASP.NET page?

I am encountering an issue while attempting to use $(document).ready() as shown in the image above. What steps should I take to troubleshoot and resolve this problem? Update 23/05/2011 10:54 A new insight has come to light. The page I am working on inher ...

Blur Event Triggered in Primefaces Editor

My current setup involves using JSF Mojarra 2.2.8 with PrimeFaces 5.1, where I utilize a PrimeFaces editor for text input. I am looking to automatically upload the entered text via ajax. However, the editor only supports an onchange event. I'm seekin ...

Ensuring Angular2 Javascript is validating only numerical input and not accepting characters

Access the full project here (excluding nodes_modules): Note: After running the project, all actions related to this issue can be found in the "Edit All" section of the website. Click on that to view the table. The main objective of this website section ...

Exploring the contrasts in employing functions within a react-native environment

Imagine having a component called "wo" that receives a function as a parameter. export default class SomeComp extends Component { constructor(props) { super(props); } _someFunc = () => { return ... } render() { ...

Is it possible to iterate through a nested object with a dynamic number of fields?

{ "pagesections": [ { "title": "Leadership Team", "sections": [ { "title": "Co-Founders/Co-Presidents", ...

Encountering Issues with Yeoman Installation

As a newcomer to Ubuntu and Angular, I am in the process of setting up a Yeoman framework. However, whenever I try to run the "yo" command, I encounter the following errors: Error: EACCES, mkdir '/home/diarmuid/tmp/npm-2997-20XPEB7W' npm ERR! ...

Issue with Installing Vue CLI Plugin Vue-ChartJS

For my project, I am utilizing Vue CLI and planning to incorporate the vue-chartjs plugin. In order to set it up, I followed this instructional guide: . However, upon running the process, I encountered an error with the npm package: ...

What tips can you provide for shrinking the size of an AngularJS website with the help of Google Closure Compiler?

Is there a way to decrease the size of an Angularjs site using Google Closure Compiler? I have a website built on Angularjs 1.8.x and I am interested in compiling it with Closure. Are there any examples or demonstrations available to help me achieve this ...

Shifting the entire page from left to right and back again

I am in search for a template that moves the page from left to right. If anyone can guide me on how to create this effect or provide a JavaScript example, I would greatly appreciate it. ...

Is there a method available to condense or merge PHP, DHTML, and JavaScript components efficiently?

The title may be a bit confusing, so let me explain my idea here: Imagine we have a component for a web page, such as a database-driven table or grid. This hypothetical "component" functions independently, relying on several mixed language files: HTML for ...

Interactions of selecting dates in datepicker widget

Currently, I am working on developing my personal work website. One issue I have encountered is with the calendar feature. The "From" date can be selected before today's date, which is not ideal. Additionally, if a date 5 days from now is chosen as th ...

What is the best method to redirect users who are not logged in from every URL when using PassportJs?

I am currently developing a web application using NodeJS, and I have integrated PassportJS with passport-local-mongoose for authentication. Below is the code snippet I've created for the root route to verify if the user is logged in: app.get('/ ...

Is there a way to retrieve the information from the v-text-field without using the v-model directive?

<div v-for="i in parseInt(questionCount)" :key="i"> <v-layout> <v-flex xs6 offset-3 mt-15" > <label for=""> Enter question number {{index}}:</label> <v-text-fi ...

Is it possible to add to the existing class based on a certain condition?

I have a coding challenge that I need help with. I have a set of code where I want to replace the old value in a class named "content" based on certain conditions. If the value within the class matches one of the values in an Array, then I need to append s ...