Questions tagged [chartjs-2.6.0]

Chart.js is a JavaScript library for creating animated, interactive graphs for inclusion on web pages. This tag is for version 2.6.0 specific questions.

Chart.js 2.6.0

Chart.js is a javascript library that can be used to easily create animated, interactive graphs to include on web pages.

Version 2.6 provides improved stability, a new documention and new features like an advanced area chart.

Further Information

Related tags

291 questions
15
votes
2 answers

How to set axes' step size in Chart.js 2?

I created a simple line chart using chart.js with 3 Y axes: https://codepen.io/anon/pen/dZVgKw As you can see, the last one is going from 10 to 20 without any number between. How can I set step size here? This is how I add an axe: { id: 'C', …
Damien Monni
  • 1,418
  • 3
  • 15
  • 25
10
votes
5 answers

Chart JS plugin to change line color depending on value

I am attempting to create a line chart where the color of the line (and the points) is dependant upon the value being plotted. For example if the value is above the following thresholds [0, 115, 125] then the color would be either ['green',…
Sheixt
  • 2,546
  • 12
  • 36
  • 65
8
votes
3 answers

Chartjs break line for axes tick labels text

I'm trying to allow breaks on spaces for the labels of my data object. I've looked through configuration options on the Chartjs docs tick configuration to either allow line breaks or the ability to add a CSS class where I can handle this with…
curtybear
  • 1,458
  • 2
  • 20
  • 39
8
votes
2 answers

Chart js. How to align text by the center of the tooltip?

bodyAlign and titleAlign don't work, maybe somebody knows how to align text by the center of tooltip? https://jsfiddle.net/Dima1501/m7s43hrs/2900/ var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'doughnut', …
8
votes
3 answers

How to add label for ChartJs Legend

In the ChartJs, how to add text/label above the legend. I don't want the label for the chart, but I need to place it above the legend. I am using ChartJs for generating charts.
Vamsi
  • 423
  • 1
  • 5
  • 19
7
votes
2 answers

How to change X-Axis Interval on Chart.js

I have a line graph on Chart.js and am trying to edit the intervals on the x-axis and the y-axis. My y-axis intervals are functioning as expected, but my x-axis intervals are not. I tried the following code let myChart = new Chart(inputChart, { …
kashmoney
  • 412
  • 1
  • 5
  • 17
7
votes
1 answer

chartjs height does not follow parent container

Note: I have fixed issue #2, it's wrong data. I am still facing issue #1. I have the following config for a line chart. My example data for a dataset is {x: '29/01/2017', y: '0.00234'} options: { responsive: true, maintainAspectRatio: false, …
iPhoneJavaDev
  • 821
  • 5
  • 33
  • 78
7
votes
1 answer

ChartJS: get points information on hovering the points

I have successfully got the information by onClick function. But is there any method i can get the point information on Hovering over the point. Right now onHover as mentioned in docs is not working to get the point. This is my jsFiddle.
fat potato
  • 503
  • 1
  • 9
  • 29
7
votes
1 answer

how to change background in chartjs and remove background lines?

How to change background color, and remove this lines, and how to cahnge some tex, for example: text of point, when you hover on some point you get title and value of this. my js function creating_chart(get_wrapper,type_of_chart, labels_of_chart,…
InvictusManeoBart
  • 373
  • 3
  • 8
  • 25
7
votes
1 answer

Chartjs: how to show only max and min values on y-axis

Using Chart.js, I'd like to display only two labels (or ticks) on the y-axis: the max and min of the values. The values are all floating point numbers. I'm not sure if the callback function yAxis.ticks.callback is the place to do it.
Timothy Barmann
  • 598
  • 7
  • 17
6
votes
1 answer

How can I get multiple charts(bar and line) with ng2-charts?

I have bar chart and I want to draw average line on this bar chart. My solution: In data sets, I add element with type as 'line': https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.ts public barChartLabels: Label[] =…
Minh Tien Tran
  • 1,038
  • 9
  • 11
6
votes
1 answer

Wrong label value is displayed on point hover - Chart.JS

When you hover point on a Line chart tooltip displays wrong value of label from x-axis. I am using the latest version of Chart.JS 2.8.0 Here is the fiddle: https://jsfiddle.net/2mq1vt0o/ This is all data from displayed…
sebaoka
  • 119
  • 12
6
votes
2 answers

How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?

I want to hide the last label in the chart. It is not a static array, data keeps on coming. Hence the last label cannot be just set to blank or null value. Is there any chartjs option to hide it or how to access labels array in chart plugin?
DR93
  • 463
  • 6
  • 21
6
votes
2 answers

ChartJS - Line Chart with different size datasets

I'm working on an application that will generate some charts and I'm using chartjs to draw them. The issue I'm facing is this: the charts will be generated with dynamic data. The application may generate up to 9 datasets and rarely they will have…
Marrone
  • 487
  • 2
  • 7
  • 18
5
votes
0 answers

ChartJS Pie chart is too small on mobile

I am trying to make my ChartJS Pie chart responsive on mobile. All the labels and titles scale ok, but when it comes to the actual chart it looks like this. This is what I am aiming for it to look like. I tried changing aspect ratios and…
user2062626
1
2 3
19 20