Skip to main content
How are we doing? Please help us improve Stack Overflow. Take our short survey
Filter by
Sorted by
Tagged with
0 votes
0 answers
48 views

I am using Chart.js and try to make line chart with 2 curves. I want different fonts styles for legend labels for each curve. Here is my code: const ctx = document.getElementById('myChart'); const ...
Beowulf's user avatar
0 votes
1 answer
73 views

Installing chart.js to Rails 8 with importmap Install package bin/importmap pin chart.js Pinning "chart.js" to vendor/javascript/chart.js.js via download from https://ga....
150Years's user avatar
  • 101
-1 votes
1 answer
80 views

I’m building a Radar chart in React using react-chartjs-2 and Chart.js v4. I want to disable the default black “point labels” (around the circle) because I’m drawing my own custom labels with a plugin....
user31857018's user avatar
Best practices
0 votes
1 replies
38 views

When using options.plugins.legend.labels.generateLabels , I would like to group legend items in multiple rows, by introducing a newline. I would like to use the 'native' legend plugin, and avoid ...
SimoneMSR's user avatar
  • 506
Tooling
1 vote
0 replies
95 views

I'm currently evaluating React-based plotting libraries for a project where we need to implement interactive charts such as line, bar, and scatter plots. The goal is to find a library that offers good ...
mlodhi's user avatar
  • 754
0 votes
1 answer
64 views

Im trying to add some space on legend but when i increse height liek that it increses space but its aligned at top so all the space is addign to bottom but since i positioned my legend at bottom i ...
user31665531's user avatar
0 votes
1 answer
87 views

I am using the ChartJS library with a Vue Chart wrapper library. Playground/Demo My current issue is, when you open the playground, you can see the date labels on the X axis sort of "overflow&...
Young Royal's user avatar
0 votes
1 answer
64 views

The following code contains a simple chart.js sample that works in angular component. The charts contains 2 points in one dataset. How can I specify label for each point that will be displayed near ...
Zvi Vered's user avatar
  • 655
1 vote
1 answer
70 views

ChartJS automatically scales radar charts to fit the containing element. This ensures labels on the left and right are completely displayed. However, if the rendered label lengths differ, this means ...
Dan's user avatar
  • 1,451
0 votes
0 answers
35 views

I'd like to implement line segment styling in a TYPO3 dashboard widget. My data provider implements TYPO3\CMS\Dashboard\Widgets\ChartDataProviderInterface and provides a getChartData() method which ...
Matt Raines's user avatar
  • 4,247
0 votes
0 answers
40 views

I have a line chart built in chart.js 3.7. The legend items at most screen widths need to overflow into a second line. However, this only happens about 50% of the time the chart loads. The first image ...
katecharts's user avatar
4 votes
1 answer
99 views

Is there a way to add a borderradius to the fill background on a line chart in Chart.js? An example of what I want to achieve: Line fill with borderradius I've used fill: 'start' on the dataset and ...
Odd Anfinn Flakk's user avatar
-2 votes
1 answer
73 views

I have a form appearing in a popup, this loads in the content section of chart.js new Popup function. I'm utilizing the loadCallback as described in their documentation to set up actions based on ...
Angela Hornung's user avatar
1 vote
1 answer
93 views

I need to draw a bar chart, not exactly but somewhat similar, like in the first picture. I have one stacked bar consisting of 2 bars one narrow bar and one non-stacked with the same width as the ...
DerMega's user avatar
  • 23
4 votes
1 answer
179 views

I updated chart.js from old 2.6 to latest 4.5 and managed to break a bunch of stuff. I fixed all except for two issues: Line chart that only shows dots and no lines. I know my dataset and labels (...
NoBullMan's user avatar
  • 2,252
1 vote
1 answer
103 views

I am using line chart (chart.js) to display two pens of data over time. In the sample code below the chart is created and 30 seconds of historical data is immediately added to each pen. Thereafter a ...
MoGuLza's user avatar
  • 13
1 vote
1 answer
65 views

I have created an annotation with a label (see jsfiddle). <html> <head> <title>test chart</title> <script src="https://cdn.jsdelivr....
Monathan's user avatar
0 votes
1 answer
57 views

I want to hide these tick lines (only the part that sticks out from chart) on some specific ticks. options.scales.x.grid.drawTicks = false; hides the tick line from all the ticks. I do not want to do ...
Gaurav Sapkota's user avatar
0 votes
1 answer
47 views

I'm using chartjs for line charts, and I have this code I'm using to dynamically increase the thickness of the lines: $(document).on('change', ".line_width", function(e) { e....
NaughtySquid's user avatar
  • 2,098
0 votes
1 answer
231 views

I’m using Chart.js v4.4.3 with chartjs-plugin-zoom v2.0.0. The zoom works with the mouse wheel, but the pan feature doesn’t work, and the onPan callback isn’t triggered despite being enabled and ...
pepe12311's user avatar
0 votes
1 answer
171 views

I am trying to implement chart js into a vanilla js project, but I cannot seem to make it work. This is what I am using: <script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/chart....
lowzyyy's user avatar
  • 91
0 votes
1 answer
102 views

I work on an Angular application with charts with Chart.js. On the webpage, I have several charts of type horizontal bar charts. Here is the definition of the chart in the html template : <p-chart ...
Glim's user avatar
  • 123
1 vote
1 answer
93 views

I've created a bar chart with a couple different datasets, and it works well. However, one dataset is bottom aligned, and the other is top aligned, allowing some minor overlap that would be prettier ...
user30589464's user avatar
0 votes
1 answer
65 views

I hope that the right Y axis scale of ChartJs is only displayed within half of the length。 And includes the entire range of values. y1: { type: 'linear', position: 'right', title: ...
hu wu's user avatar
  • 11
1 vote
1 answer
52 views

I've developed a custom element using Lit, incorporating the Chart.js library. This element exposes properties like data, options, plugins, and type, which are used to generate the chart. When ...
praneash _gp's user avatar
0 votes
1 answer
84 views

I'm using Chart.js in a Vue 3 application. I have this thing just about wrapped up with how I want it. However, there is this small white gap before the start of the graph as it is drawn that I cannot ...
djneely's user avatar
  • 1,169
1 vote
0 answers
42 views

I'm working on a system where users generate reports based on a selected time range, and the report includes charts created with Chart.js. The charts display data for Geolayer and Geozone entities, ...
Nik Ahmad Izzat's user avatar
1 vote
1 answer
174 views

In ChartJS one can change the point style to some predefined forms. But I need the point style to be an arrow so I tried to customize the point style but didn't succeed. I tried the following: ...
Bert's user avatar
  • 149
1 vote
2 answers
109 views

I'm building a React-based admin dashboard that displays user engagement over time using Chart.js. The chart should update dynamically when new data is fetched from an API. import React, { useRef, ...
Omprakash S's user avatar
1 vote
1 answer
81 views

i want to add bubble chart using chart.js to my project and i am trying to show image(PNG Format) background of chart.js bubbles like blow image, i saw this topic already, but doesn't work for me ... ...
test testb's user avatar
0 votes
0 answers
71 views

I'm using Chart.js (react-chartjs-2) in a React app to render a stacked bar chart with custom plugins and chartjs-plugin-datalabels. It works most of the time, but occasionally on initial load (about ...
Malxruxes's user avatar
0 votes
0 answers
11 views

I have the same problem as how to get React chartjs to resize back down with window. I can't seem to get the chart to resize when the parent div is resized. After consulting the documentation, I've ...
Patrick Aldis's user avatar
0 votes
2 answers
82 views

I'm making a website where people can browse data by region. Basically, it shows a bar chart, and there's a dropdown menu at the top that updates the data based on the selection. One detail I'm having ...
Michael Erb's user avatar
0 votes
1 answer
116 views

i have a set a click event that changes some data based on which category the chart is clicked. however, it is not a very good experience for the user and i want to highlight all the bars of a ...
Moblize IT's user avatar
  • 1,338
2 votes
1 answer
72 views

I have a click event that changes some data based on which category the chart is clicked. However, it is not a very good experience for the user and I want to change the background color of that ...
Moblize IT's user avatar
  • 1,338
2 votes
1 answer
89 views

So I am using Chart.js in my Ionic Angular project and I am able to attached a click event to tap on a specific bar and get the data. In my case, I am rendering 3 bars in each category. For a better ...
Moblize IT's user avatar
  • 1,338
2 votes
1 answer
300 views

Im trying to use ChartJsBlazor with my Blazor WebAssemply project in Visual Studio and I've pretty must just copied the guide from the "Getting Started" section (https://github.com/...
Matias Hansen's user avatar
0 votes
2 answers
98 views

I'm starting to learn how to build Angular apps and I need to implement a toggle button that show/hide 2 charts, one chart has static data and the other on call data from a db.json file through a ...
Gastón Rayo's user avatar
1 vote
1 answer
106 views

I'm putting a chart (made using Chart.js) inside a CSS grid, and I want the chart to responsively fill the full width of its grid cell. However, even after turning on responsive and turning off ...
The-Coder-Who-Knew-Too-Little's user avatar
0 votes
1 answer
64 views

I am working on an Angular application using Primeng and Chart.js. I have a big webpage with many forms and charts. When I update one field of my forms, I need to update the corresponding charts. All ...
Glim's user avatar
  • 123
0 votes
2 answers
80 views

I'm using ChartJS with Vue: "chart.js": "^4.4.9", "vue": "^3.5.13", "vue-chartjs": "^5.3.2", My line chart has data where the x values ...
Colin's user avatar
  • 2,249
1 vote
1 answer
151 views

I'm using Chart.js (v4.x) with Next.js (v15) to render line charts. Everything works perfectly in development (npm run dev), but when I build the project and run it in production mode (npm run build &...
Utkarsh Tiwari's user avatar
0 votes
0 answers
42 views

In Chart.js v4 I know that I can use a function to style segments as described here: https://www.chartjs.org/docs/latest/samples/line/segments.html: segment: { borderColor: ctx => skipped(ctx, '...
You Old Fool's user avatar
  • 23.2k
0 votes
0 answers
53 views

I'm using Chartkick 5.1.4 with Rails and code like the following in my view: <%= line_chart( charts_data_last_1_hour_path, :refresh => 60, ..., :library => { :scales =...
user502052's user avatar
  • 15.3k
0 votes
1 answer
120 views

I'm using doughnut chart from chartJS for my project. For some reason, it become smaller when I hover into center area of the chart. Below i have a link to the video how its looks like. I want to find ...
Sam's user avatar
  • 5
0 votes
1 answer
43 views

In chart.js datalabels plugin, I can add 'value' to the backgroundColor function like so: backgroundColor: function (value, context) I can then use const pointset = value.dataset.data; to get the ...
jamminjames's user avatar
0 votes
1 answer
242 views

I am trying to call afterUpdate, afterLayout or afterDraw I try to directly put this in plugns or annotatinos, However nothing works, how can I make this correctly? What I want to do is written here, ...
whitebear's user avatar
  • 12.6k
0 votes
1 answer
45 views

I try to get some chart with chart.js with data from a database. If I put it directly inside the array its works fine, if i try to bind it inside a foreach loop I get "the variable $subs" is ...
Stephan Apenbrink's user avatar
1 vote
1 answer
55 views

I have a temperature chart, with X axis = time, and Y axis is temperature. Because I have data collected every minutes since several years, I have a lot of data, and I don't want to display all of ...
JayMore's user avatar
  • 744
0 votes
0 answers
63 views

I'm trying to use Chart.js to load some components, but I don't know why I keep getting this error: Refused to load the script 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js' because ...
Olawale Abaniwonda's user avatar

1
2 3 4 5
248