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
0
votes
0 answers

Keep yAxis labels above xAxis line

I'm trying to create a chart where only the min and max labels of the y axis are display. These labels are then rotate 90 degrees so they are flat against the line. Both of these have been fairly simple to implement, however I've run into an issue…
PaReeOhNos
  • 4,338
  • 3
  • 30
  • 41
0
votes
1 answer

ChartJS 2.0 differences in code help needed

I am having trouble converting the code below to work with Chart.js 2.0. My chart object is created using the required... var chart = new Chart({...constructor code here...}); and I have figured out how to create my custom tooltip and custom…
Phil
  • 4,029
  • 9
  • 62
  • 107
0
votes
1 answer

display specific color for lines in chart.js line chart

I have a multi line chart using chart.js version 2.4 and angular-chart.js.I want to display the 2 lines in red and green respectively and I donot want to fill color beneath lines .How can i achieve this? var app=angular.module("app",…
user3946910
  • 69
  • 9
0
votes
1 answer

ng2-chart : Adding labels in a loop prevents graph from loading

I am trying to get a graph to display my data using ng2-charts. Everything works fine using mock-up data, however when I try to iterate over an Array passed by my parent component the graph itself doesn't display, only the orthogonal mark and…
Standaa - Remember Monica
  • 1,878
  • 2
  • 28
  • 45
0
votes
1 answer

How can I give the automatically generated y-axis values on bar charts in Chart.JS commas?

I am adding commas to my data values like so: ctx.fillText(addCommas(dataset.data[i]), model.x, y_pos); . . . function addCommas(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx =…
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
0
votes
1 answer

Put numbers in graphics

How can i input numbers into the doughnuts graphics? I need that shows the percentage of each element. I started now see the chart JS, can I do it? I would like to show like these var ctx = document.getElementById("myChart"); var myChart = new…
Pedro Henrique Kuzminskas
  • 193
  • 8
0
votes
1 answer

How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?

I'm generating a Chart.JS bar chart that renders like so: As you can see, the bottom of the legend and the top of the grid/graph are crammed together. Also, the individual bars are scrunched together more than strictly necessary, making the values…
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
0
votes
1 answer

How can I move a label left, paint it black, or remove it (Chart.JS)?

I've got a horizontal bar chart displaying like so: As the second data value on the bars (1.0, 0.8, etc.) are partially obscured, I would like to do one of the following things, in order of preference: Move them to the left, so that they are…
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
0
votes
1 answer

Chart.js - Creating a single bar chart with states

I'm making an app using ionic framework, where I show some data in a chart, using the chart.js... I'm basically trying to make a bar chart, where I only have 1 horizontal bar, that simulates a state of an activity through the years, as you can see…
slyzer
  • 215
  • 1
  • 19
0
votes
1 answer

How can I create a stacked bar chart with Charts.JS that displays relative rather than absolute values?

I am creating a stacked bar chart with Charts.JS that looks fairly good: What I need, though, is for each bar to completely fill the grid, and for the green value to be a percentage, not an absolute value, and for the red value in the same way to…
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
0
votes
1 answer

How can I add a label above just the last bar in a Chart.JS bar chart?

I am creating a bar chart like so: var ctxForecastChart = $("#forecastLineChart").get(0).getContext("2d"); var forecastChartData = { labels: [ "Total Sales" ], datasets: [ { label: "8/28/2016 - 9/3/2016", …
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
0
votes
2 answers

How can I cause a legend to appear to the right of the pie (Chart.JS)?

I'm creating a fairly simple pie chart with Chart.JS like so: var data = { labels: [ "Bananas (18%)", "Lettuce, Romaine (14%)", "Melons, Watermelon (10%)", "Pineapple (10%)", "Berries (10%)", …
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
0
votes
1 answer

Chart.js / HTML Canvas - move line

I need to move vertical line on HTML canvas using Chart.js. I am using this: this.chart.ctx.beginPath(); this.chart.ctx.moveTo(point.x, scale.startPoint + 24); this.chart.ctx.strokeStyle = '#ff0000'; this.chart.ctx.lineTo(point.x,…
Nivelety
  • 73
  • 1
  • 1
  • 8
0
votes
1 answer

Extend chart.js horizontal bar graph to include a vertical line

I'm trying to add a vertical line to at a set point of a horizontal bar chart. Examples I've found do not seem to apply to charts.js 2. Even if I create a new chart type and use the horizontalBar draw method with no modifications, the chart won't…
user3113357
  • 128
  • 8
0
votes
1 answer

How to add data labels in each bar in stacked bar chart in chart.js?

I am using a directive to use chart.js in Angular JS. Git Link : https://jtblin.github.io/angular-chart.js/ I am interested in using stacked bar charts. How do I add data labels on the bars to display each of the bar values in the stacked bar…
Sabyasachi
  • 411
  • 4
  • 9
  • 21
1 2 3
…
29 30