My Node.js application fetches a JSON object from a MySQL database and I want to display it in real-time using Chart.js and React. Here is the code snippet for fetching the JSON data from the MySQL database (script.js): const mysql=require('mysql&apo ...
I'm currently working on a chartJS project where I have a callback function to display data in tooltips. However, as the data increases, the overflow section of the tooltip gets hidden from the canvas. Is there a solution to prevent this overflow and ...
I am currently working on a vuejs chart that displays data, and I have been trying to update the labels but it doesn't seem to be working. Here's the code in ChartjsComponentLineChart.vue: <script> import { Line } from 'vue-chartjs' export default ...
While working on integrating django with chartjs, I have utilized a class-based view as shown below. class SingleTagChartJSONView(BaseLineOptionsChartView): def get_context_data(self, **kwargs): context = super(BaseLineChartView, self).get_con ...
I'm currently facing a challenge while trying to create a bar chart using HTML and JavaScript. Unfortunately, the bars are not showing up for some reason. I have included the code snippet below along with an imagehttps://i.stack.imgur.com/4H7ol.png. ...
Struggling with inputting data into a ChartJS line-chart instance. The chart only displays one point with the right data but an incorrect label (named 'label'): Check out the plot image The odd thing is, the extracted arrays appear to be accura ...
Updating my chart data using chartJS and its angular-chart wrapper has been quite the challenge for me. When I click a button, new data is added to the chart without any issues. However, I encountered a problem when trying to update the chart after a scro ...
Struggling to make chart.js work with a time axis is proving to be quite challenging for me. The code I have is as follows: <html> <head> <script src="https://cdn.jsdelivr.net/npm/moment"></script> <script src="https://cdnjs.clo ...
I'm currently working on a project using chart.js and I'm trying to customize the label/legend styling for my chart. My goal is to replace the rectangular legend with a circular one. I've come across the suggestion of creating a custom legend (using legend ...
I am looking to create bar charts and pie charts using ChartJs, with data fetched from php and mysql. Specifically, I want to generate a bar chart that illustrates the statistics of male and female students, along with the total number of students. The des ...
I have successfully integrated a doughnut chart plugin into my website. However, I would like to display multiple charts on the same page with different data sets. Below is the code snippet for the current chart being used: This is the chart I am using & ...
Creating a straightforward bar chart using Chartjs 3.x The process involves fetching JSON data from the server, parsing it, and storing specific parts in arrays. See the code snippet below: serverData = JSON.parse(http.responseText); console.log(serverDa ...
I am facing a challenge with creating a bar graph using chart.js that loads data from a PHP array via ajax. The data is successfully loaded through ajax, as confirmed in the console, but I am unable to display it on the graph. Here's what I see in the cons ...
Is there a way to dynamically adjust the Y-axis ticks in a chart.js graph? I attempted to modify them using the following commands: this.chartOptions.scales.yAxes[0].ticks.min = 10; this.chartOptions.scales.yAxes[0].ticks.max = 18; ...
I have a graph displaying x-axis and y-axis data from a database table. However, I encountered an issue when trying to append a third set of data in the afterbody callback function within the tooltip. It displays the entire dataset in every tooltip. My go ...
Welcome to the world of coding! Here's a scenario with an array: [ { "question1": "Apple", "question2": 5, "question3": "Item 1" }, { "question1": " ...
In my component, I have two vue-tabs with two instances of vue-chart-js each. While they initialize without errors, attempting to extract an image from a chart in the inactive tab using document.querySelector('#mySecondChart').toDataURL() results in nothin ...
Seeking to utilize the reactive data mixin for vue-chartjs The mounted function for setting the initial data is functioning properly, and I can visualize the chart accurately with the API response: fetchSessionTrends() { axios.get(endpoint) .then ...
I am trying to implement a bubble chart and I would like the function to be called when a user clicks on one of the bubbles. What is the best way for me to pass the data to this function? https://i.stack.imgur.com/FYiSP.png <p-chart type="bubble" [da ...
I am currently working with a service class that retrieves data through HTTP in several methods. For example: filesPerWeek(login: string): Observable<FilesLastActivity[]> { return this.http.get('api/report/user_files_by_week?userId=' + login) ...
Having trouble removing legend from Radar Chart in chart.js even when using legend: {display : false}. The code is being utilized and then displayed with HTML/JS. Here is the provided code snippet: var options5 = { type: 'radar', data: { ...
I've been working on creating a crosshair using the annotation plugin, and while I've been able to modify the line's value, it doesn't seem to update on the chart. Here are the details of my chart options : public financialChartOptions: ChartConfiguration ...
Currently, I have a line chart that displays only four values, yet my datasets contain more data points. The issue is that the dot on the line is shown for all datasets. Is there a way to show the circle pointer only for x values that are displayed? https ...
After creating a line chart with chartJS, I am looking to enhance it by adding bubbles to indicate specific data points such as the mode, red, and amber levels. While I have successfully drawn the lines on the chart, I am unsure of how to incorporate these ...
I've encountered a challenge with Remix.run and chart.js (react-chartjs-2) when attempting to display the chart. I followed the documentation and installed the necessary dependencies: react-chartjs-2 and chart.js. Here's the snippet from my package.json: ...
I am a beginner with AngularJS and I'm currently developing an application on Ubuntu. While trying to add Chart.js using npm install chart.js, an error is being displayed as follows. npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...
Whenever I try to render the chart, all I get is a blank page along with this error message: TypeError: Cannot read property 'getBasePixel' of undefined There seems to be an issue with my implementation in Vue.js even though I followed the ex ...
Hello, I've come across this issue in my react app that I need help with: this.chart = new Chart(node, options); // adding data to the chart ... this.chart.destroy(); this.chart = null; this.chart = new Chart(node, options); // adding data to the chart .. ...
Hello there, I am seeking guidance on how to implement an ajax function in yii2. I am currently developing a product within the yii2 framework and wish to incorporate charts such as chartJs, googleChart, or d3. In the index file of the backend area (xx/xx ...
After extensive searching, I thought I was on the verge of finding a solution several times, but unfortunately, no luck! I am aware that a similar question was posted yesterday: React Chartjs, how to handle a dynamic number of datasets, but it remains una ...
I am currently using chart.js within an Angular framework to visually display data. Is there any method available to reset the y-axis data when changing tabs? Take a look at this Stackblitz demo for reference. Upon initial loading of the page, the data ...
I am currently facing an issue while trying to populate a chart using the ChartJS plugin with data from my MySQL database. I keep encountering the error message: mysqli_fetch_assoc(): Couldn't fetch mysqli_result in ... Despite using json_encode, ...
Currently, I am facing an issue while attempting to generate a chart using Chartjs and Django. The problem arises when transferring data from views.py to the JavaScript code. Here is a snippet of my code in views.py: def home(request): labels = [&quo ...
exampleFunction = () => { return ( <div> <canvas class="myChart"></canvas> </div> ) } What is the best way to incorporate JavaScript code into the <script>js code</script> for the myChart ...
UPDATE Currently, I am only able to view the image linked below: https://i.stack.imgur.com/hkkeY.jpg UPDATE END This piece of PHP code fetches multiple rows from a MySQL database and encodes the result using json_encode. This allows us to retrieve it i ...
I'm currently working on creating a chart web page using Django and Chart.js within the views.py file of the Django framework. class ChartView(TemplateView): template_name = 'graph.html' def get_context_data(self, **kwargs): ...
After incorporating displayFormats in scales.x, I noticed that my xAxes labels are spaced differently based on the data object they contain. How can I adjust my xAxes labels to have equal spacing? The code snippet is displayed in the following image. Pleas ...
I'm attempting to create a unique pie chart that illustrates an array of countries on the first level and their respective cities on the second level. After modifying the data in a JSON file to align with my goal, it doesn't seem to be working a ...
I'm looking to create a dynamic graph that updates every 5 seconds or in real-time. I've managed to get it working when zooming in and out of the page, but not when doing nothing. I know it's possible to achieve this, but I can't seem to find the right sol ...
Everything is looking great on my chart with the labels perfectly displayed at the defined font size. However, I am facing an issue when viewing the chart in higher resolutions as the font sizes appear small. Is there a way to dynamically adjust all size-r ...
An error occurs when I remove the following line from my index.html file <script src="node_modules/chart.js/dist/Chart.js"></script> Is it possible to eliminate this line from index.html and instead include the equivalent line in my systemjs. ...
I have been experimenting with chart.js and vue.js. The component I created is called MessageGraph, and it is structured like this (with data extracted from the documentation): <template> <canvas id="myChart" width="400" height="400">< ...
I have the necessary data for the chart, but I am encountering a warning that I need to resolve without causing any damage to the existing chart. I tried using myChart(update) to update the date on the chart, however, this method is not working. Is there ...
Upon hovering over a dot, only a blue line is displayed without showing a tooltip as expected below: Library Version: "chart.js": "^2.9.3", "chartjs-plugin-annotation": "^0.5.7" Actual : enter image descriptio ...
At the moment, there is a menu displayed on the left side of the page. When you click on the navigation links, the page content loads using the code snippet below: if (this.id == "view-charts") { $("#rightContainer").load("view-charts.php"); $(thi ...
How can I show the numberValue value as a label on hover over the bar chart? Despite trying various methods, nothing seems to appear when hovering over the bars. Below is the code snippet: getBarChart() { this.http.get(API).subscribe({ next: (d ...
I am currently working on a small stock market project using Python. Every week, I generate a status.xlsx file that provides information about the sectors within my portfolio. xls = pd.ExcelFile('Status_week_9.xlsx') df1=pd.read_excel(xls) print(df1) As I ...
I am using vue js to display a graph with chartjs. I have implemented an onClick function on the graph to emit an event in the parent component and retrieve data. However, the event is not working as expected. Can you help me identify the issue? Component ...
I am facing an issue with displaying a chart or table in a div based on an XHR response. In the case of a chart, I want to replace the div contents with a canvas element that will be used by chart.js to show a graph. When I directly include the canvas ele ...
Currently tackling a primeng chart project involving the development of a doughnut chart within angular. The task at hand is to display text inside the doughnut chart, aligning with the designated design vision. Referencing the image below for visualizatio ...
I am currently working on developing a dynamic bar graph using JSON data that changes based on the applied filter. The objective is to display the TYPE associated with the PERIOD in the graph, but only if it exists. If not, then nothing should be shown. ...
Currently, I am working on creating a card component that includes a chart. The line chart was generated using Chart Js and React JS with MUI components. When I enclose the chart within a Paper or Card component, it alters some styles, such as changing t ...
Can multiple charts be nested inside one another? To see an example of a single chart and what I would like - where the first one is placed inside the second one and so on - please refer to this js fiddle. var data = [ { label: "title 1", value: ...
Currently, I have implemented vue-chart-js along with the labels plugin for a donut chart. Everything is working well so far - when I click on a section of the donut chart, the background color changes as expected. However, I now want to also change the fo ...
I'm creating a bar graph that has two bars representing different weeks. Currently, it looks like this: https://i.stack.imgur.com/6Avni.png However, I want it to look like this: https://i.stack.imgur.com/TAVqe.png In order to achieve the desired result ...
I am working with a time line chart type and I want to assign colors to each step between two dots based on the values in my dataset object. In my dataset data array, I have added a third item that will determine the color (if < 30 ==> green / >30 ==> red ...
In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Her ...
I've been struggling to change the color of my chart without success. Any assistance on this matter would be greatly appreciated. Despite trying to assign color values to datasets, I am still unable to achieve the desired result. This is a snippet f ...
Can VueJs pass props as functions? <template> <line-chart class="card-content" :chartData="lineData2('Temp')" :options="options" :width="800"> </line-chart> </template> Is it possible to use the chartDa ...
I recently upgraded from vue-chartjs version 3 to version 4. I successfully migrated my LineChart component by updating the template section and removing the draw method calls. This component is utilized for two separate charts. However, when I close the ...
I am currently utilizing jQuery with chart.js to display the view counter based on month using PHP and MySql. Each page view is inserted into MySql in the following format : | id | ip | page | date(timestamp) | | 1 | 138.86.20.20 | test.p ...
I have successfully created a line chart using the Chart.js 3.5 library. The chart is responsive, all animations are working fine too. I am currently facing an issue where I am attempting to update the data from a parent component and trigger a chart updat ...
I recently discovered a chart library called Chartkick for Vue projects. If you're interested, you can check it out here: In my project, I have data passed as props to a component. However, I encountered an issue where the prop couldn't be acces ...
My HTML page includes a bar chart created using the ChartJS library. However, upon loading the page, the chart appears empty without displaying the data I provided and without rendering the bars. It only responds after clicking on the legend - first displa ...
I have been working on a project that involves creating a package with a react chart component using chart.js. Everything runs smoothly when I debug the package in storybook. However, I encountered an error when bundling the package with rollup, referenc ...
Currently, I am facing a challenge in creating a new custom plugin for chart.js. Specifically, I am encountering a type error while attempting to retrieve the dataset option from the chart object. Below is the code snippet of the plugin: const gaugeNeedle ...
Does anyone have any suggestions on how to create a visualization like the one shown in this mockup? https://i.stack.imgur.com/X72RP.png The mockup features two bar charts, each with a greyed-out area representing its own 100% or max value. For simplicity ...
Using NodeJS in conjunction with ChartJS, I am able to render graphs directly to a file successfully. This is achieved by installing the npm module ChartjsNodeCanvas. To display labels on the graph, I utilize the official ChartJS plugin ChartJS-plugin-da ...
I am currently working on a production tracking page that features multiple charts. I want to avoid inconsistencies in tracking at first glance. Is there a way to achieve this using chart.js? If not, what would be the best approach to address this issue? ...
As a beginner in Angular, I am currently working on my first page using Angular and facing some challenges with implementing onClick functionality in ChartJS Bar graphs. The issue arises when attempting to access this.chart within the onClick event of Cha ...
When I was exploring the documentation for Chart.JS on their website, specifically at the Quick start section, I came across a note that mentioned importing the package as import Chart from 'chart.js/auto' to get access to all the features. My i ...
Why does the font color in chartjs appear as light gray and not print when you want to do so from the page? I tried changing the font color of chartjs in the options attribute, but it didn't work. How can I change the font color in chartjs angular? ...
Can you assist me in understanding how to dynamically populate Chartjs with data from a json file? Specifically, I am looking to dynamically fill the labels and data fields. Sample JSON File <<< [ { "EFICAZ_TAB_ITEM_ID":1, " ...
I'm trying to set up a double yAxis, and this is how I structured the code: const data = { labels: ['a', 'b', 'c', 'd', 'e'], datasets: [ { type: 'bar', label: this.$t('numberOfBuilding'), data: ...
I'm currently working on implementing zoom functionality on a chart using vue-chartjs and the chartjs-plugin-zoom. The code I have written is giving me an error saying "this.$refs.myChart.resetZoom is not a function". How can I properly reference the ...