Stack Overflow
Stack Overflow

Questions tagged [chart.js2]

Chart.js is a JavaScript library for creating animated, interactive graphs for inclusion on web pages.

Chart.js2 is a updated and newer version of Chart.js.

See Official Version Documentation for a list of what's new in v2.5.0.

For more information on Chart.js, check out the original tag.

438 questions
3
votes
1 answer

Chart.JS Vertical Line with Moment.JS Horizontal Axis

Is there a way to create vertical lines (event lines, phase changes) using Chart.JS 2.0? I've seen some examples online (see this related question), HOWEVER, when using Moment.js to create the horizontal axis, it is not possible to give LineAtIndex…
Alex
  • 360
  • 4
  • 14
3
votes
0 answers

How to add padding in a bar chart between the outer bars and the left/right sides in Chart.js?

When creating a bar chart in Chart.js all bars take up the whole horizontal space. How can I add some padding to the most left and most right bar to achieve what you see in the image below: Alternativly this may be achieved if the bars are aligned…
lampshade
  • 2,470
  • 3
  • 36
  • 74
3
votes
2 answers

How can I add waterfall charts in Angular JS?

I have been using the bar charts from Angular Charts Directive , which has been created using charts.js . GitHub Link : Angular Charts But I need to show a Waterfall Chart in my Application. Can someone please help me to create a Waterfall Chart in…
Sabyasachi
  • 411
  • 4
  • 9
  • 21
3
votes
0 answers

stepSize being ignored in radar chart Chart.js version 2

[Update: This may have been fixed in version 2.1.5] In Chart.js version 1 I used to be able to set the spacing between the scale lines on a radar chart. The desired behaviour was lines from 0 to 100 in steps of 5. I used the following version 1…
dougmet
  • 635
  • 4
  • 19
3
votes
1 answer

Chart.js 2.0 - How to change default appearance of canvas/chart elements

I'm using the new Chart.js and trying to accomplish several customizations. Versed in JS but new to canvas, I'm struggling a bit. I'll try to provide as much information as possible.   Related Links JSBin of working demo Chart.js 2.0…
elzi
  • 5,442
  • 7
  • 37
  • 61
3
votes
1 answer

Extension for chart.js 2.X

I have used the chart.js 1.0.2 without knowing that a version 2+ arrived. Now I need fuctionallity only available in 2+ Meanwhile i have written several extensions to the chart.js 1.0.2 that i would like to convert to version…
Tor Christensen
  • 31
  • 1
  • 3
3
votes
1 answer

Multiple Chart.js Charts in Partial Views Overwriting Each Other

Using Asp.Net MVC, I am trying to create a web page that displays multiple bar charts on a single page using the chart.js library. Each chart has different data and is created in its own partial view. Instead of creating multiple different charts…
Tot Zam
  • 8,406
  • 10
  • 51
  • 76
2
votes
2 answers

How to have mutiple charts in a single page using Chart.js?

I tried to draw more than two charts with Chart.js on the same page and created a dynamic div in a loop with all the data for the chart like this:
Gowthaman Thangavel
  • 111
  • 10
2
votes
1 answer

ChartJS 2 How to globally remove xAxis gridLines?

I'm using chartjs 2, and I'm trying to disable the grid lines on xAxis and enable grid lines on yAxis and make them dashed. I have achieved this functionality by adding this to my Line graph config; scales: { xAxes: [{ display: true, …
Borassign
  • 621
  • 2
  • 7
  • 16
2
votes
1 answer

chart.js not showing all values in x axis

I'm trying to plot a line graph with multi-axis. The main issue is in x-axis not all the values are showing. Its showing some random values. There are 2 set of values, each having 10 values. So 20 ticks should be there in x-axis. But its only…
Somnath Pal
  • 190
  • 1
  • 15
2
votes
1 answer

Issue while plotting bar chart with custom x-axis with month and year in chart.js

We are trying to plot bar chart using chart.js and wanted to display month and year in x-axis but unable to do so. We are want to plot bar as shown below: https://drive.google.com/file/d/1ezvUdDyp3uNLP3pdumXKHcXGNeBVQw63/view Code snippet: var…
Deepak Savani
  • 60
  • 6
2
votes
2 answers

Chart.js how to use scriptable options

I am migrating chart.js to 3.x as per the migration guide. https://www.chartjs.org/docs/master/getting-started/v3-migration/ I am trying to set the xAxis zeroLineColor to "#FFFFFF" and I want to have the Grid line color as "#00FFFF" but as per the…
User7723337
  • 11,857
  • 27
  • 101
  • 182
2
votes
1 answer

How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js

I have been working on a chart using charts.js that show workouts duration each day. The y-axis should have dates and the x-axis should have the duration of the Series, Here is my dataset: public lineChartData: ChartDataSets[] = [ { data:…
user12639212
2
votes
2 answers

How to show second set of labels to Chart.js doughtnut chart?

I succesfully added second set of labels by following other question on SO. But now I want to show legend for all labels and second set appears crossed out. How to avoid that? Here is my attempt: https://jsfiddle.net/L5gs39u2/1/ var…
NeDark
  • 1,212
  • 7
  • 23
  • 36
2
votes
1 answer

Chartjs: Draw chart with only yAxis zero tick

Hell, all, I would like to draw the chart like this: Currently, I can use afterBuildTicks to get only zero yAxis. But the problem is that the whole other ticks were removed also. So Not sure if we have a way to draw zero tick and keep other ticks…
Nguyen Nhan
  • 31
  • 3
1 2 3
…
29 30