FAQ Database Discussion Community


ChartJS : How to set max and min value for Y axis

chartjs
I am using line chart from http://www.chartjs.org/ As you can see max value (130) and min value (60) for Y axis are chosen automatically , I want max value = 500 and min value=0. Is this possible?...

Remove Canvas then add new Canvas in same spot

javascript,jquery,html5,canvas,chartjs
I have the following HTML canvas': <div id="graphs"> <canvas id="graph1" ></canvas> <canvas id="graph2" ></canvas> <canvas id="graph3" ></canvas> </div> On a click of a button, I want to remove canvas #graph1 and replace it will a new (chartjs) canvas. So I tried the following code: dayButton.addEventListener("click", function(){ var canvas = $("#graph1").get(0);...

Chart.js not working in ASP.NET MVC with an AJAX call

javascript,jquery,ajax,chartjs
I have the following code segment: (function () { var randomScalingFactor = function () { return Math.round(Math.random() * 100) }; var barData = { labels: [], datasets: [ { label: "Test", fillColor: "rgba(151,187,205,0.5)", strokeColor: "rgba(151,187,205,0.8)", highlightFill: "rgba(151,187,205,0.75)", highlightStroke: "rgba(151,187,205,1)", data: [] } ] }; $.ajax({ url: "/GetTeams", dataType: "json", success:...

how to set color for each item in tooltip with ChartJS

javascript,chartjs
I tried to draw a line-chart with ChartJS. My code is here jsfiddle.net/mhgyqpq0/1/ How can I set color for each item in the tooltip like this ...

Customizing Chart.js troubleshoot

javascript,chartjs
Have some trouble with Chart.js 1) is it possible to move bottom labels on top of the chart? 2) is it possible to hide left labels with first grey line? 3) is it possible to set up permanent tooltips(to show temperature) on every point instead of hover tooltips? Here is...

DevExtreme Exporter prints blank page

devexpress,chartjs,devextreme
I am using DevExtreme dxExporter to export charts to pdf/png/svg. I followed all the steps they provided here, from Deploy a Server up to Tune dxExporter. Everything looks fine, my PhantomJS is ready(perfoms as a server to allow me to use the client-server model), see below: The print and export...

Run Chartjs Dart example

dart,chartjs,dart-editor
I'm trying to run the chartjs example of the dart port but It seems not to work. See screenshot with error message. Any Idea where is the problem? Thanks the source code for the example can be downloaded Chartjs Dart port Example lib/chart.dart source: library chart; import 'dart:html'; import 'dart:math'...

Use chartjs with rails

ruby-on-rails,ruby,chartjs
I'd like to use chartjs with rails in a view, it works great, but when using an option like this one : legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" rails will interpret <% and run name.toLowerCase() as a ruby code, which is actually javascript, how can I...

Chart.JS spacing and padding

chartjs
Is it possible to get some more space between the chart and the x-axis? Is it possible to get some more space between the right side of the chart and the end of the canvas area? I want to add some more elements to the canvas right beside the...

angular-charts.js doesnt work with ionic

angularjs,ionic-framework,chartjs,ionic
I have added angular-chart.js to my ionic solution, everything works well on emulator as well as device as long as i run with the "-live reload" option enabled, ionic run ios -l -s -c, but as soon as I try to run with it ionic run ios, it just shows...

Chartjs extended doughnut with text tooltip issue

javascript,jquery,chartjs
I am trying to build an extended doughnut in chartjs. I want to display the highest value as percent and its label in the middle. It works fine on load but breaks after an hover event. One a tooltip is being displayed something breaks the first draw event and move...

How to remove bars for those bars with zero value in Chartjs bar chart?

html5,html5-canvas,bar-chart,chartjs
Even if the bars have value of zero in bar chart created using chartjs, they still show a visible bar. This is misleading for my purpose and I would like to have it removed and show nothing there (meaning that, I still want to show labels with zero value but...

How to set global/specific properies when updating line-chart using Chart.js?

linechart,chartjs
this is my situation http://jsfiddle.net/co3L0bdb/4/ thanks to @potatopeelings help i am now able to set the property highlightFill to all my datasets and this works even when I show/hide a series in the graph. I added: currentChart.datasets[0].points[8].highlightStroke = "rgba(220,0,0,1)"; currentChart.datasets[1].points[8].highlightStroke = "rgba(0,255,0,1)"; currentChart.datasets[2].points[8].highlightStroke = "rgba(0,0,255,1)"; but what i get, but...

Avoid data resetting when toggling series

javascript,linechart,chartjs
In this fiddle when you toggle a serie the others reset to their inital values, instead of adding new values to themselves. How to avoid this behaviour?

Chart.js doughnut text colors

javascript,css,chartjs,chart.js
How do you change the doughnut text color and doughnut filler colors separately? I have something like this: var color = [ "#3F9F3F", "#FFFFFF" ]; var chartData = { label : myLabels, data : myData, colors : color }; The second color attribute overrides anything else I've tried. What property,...

Chart.js. Values in a big range. The smallest values are not available

javascript,math,chartjs
I use Chart.js (http://www.chartjs.org) to show traffic usage for different units using Bar Chart. If I have big range of usage (1 unit 2.5GB, 2 unit 2.5MB, 3 unit 2.5kB, 4 unit 0B) smallest values are not available (I cannot hover over or click on them) when bring them to...

ChartJs line chart repaint glitch while hovering over

javascript,jquery,charts,chartjs
I have the following code leveraging the ChartJS library. /*assume the tags in the right place */ <canvas id="graph1" width="300" height="300"></canvas> var ctx = $("#graph1").get(0).getContext("2d"); var myChart = new Chart(ctx).Line(graph1Generator("day")); ... everything works fine, but after adding the following event handler to clear and repaint the same chart with different...

ChartJS Legend Not Lining Up

javascript,chartjs
I am creating a legend for a line graph that was generated using ChartJS. The problem I am running into is the color boxes in the legend are not lining up correctly. Here is how I generate the legend: var chartLegend = "<ul style=\"list-style-type: none;\">"; for(var i = 0; i...

How to add a dataset toggle to Chart.js?

javascript,jquery,chartjs
I'm using Chart.js to create a line chart. I would like to have four different datasets that will all be visibile by default, but can be toggled on and off by clicking a button. How can this be achieved? I can't seem to find an answer in the documentation. .addData(),...

Javascript: problems with the order of my index

javascript,arrays,angularjs,sorting,chartjs
I am working on Angular and i use Chart.js, to prepare my data for the chart, I rank them in a table template formated like this : my_table[2014] [[01] = {array},[02] = {array},...,[12] = {array}] my_table[2015] [[01] = {array},[02] = {array},[03] = {array}] when i log this table with a...

Set custom colours for tooltip squares Chart.js

jquery,charts,html5-canvas,bar-chart,chartjs
When using Chart.js is it possible to change the colour of the squares within the tooltip that is used to respresent each bar? I've noticed that when you change the pointColor value it affects the colour of the squares but can you somehow use a different colour other than whats...

Chartjs, plot data based with unequal time intervals

javascript,graph,chartjs
I'm plotting a graph with chartjs where the x-axis represents time and the y-axis the corresponding data. Now i got data for today, last week, last month and last year. var myLineChart = new Chart(ctx).Line(data, options); var data = { labels: ["last year", "last month", "last week", "today"], datasets: [...

chartjs table each making series not proceeding to next tr

javascript,charts,chartjs
I am having a rather annoying problem and think I am just missing something obvious. I am using chartjs to create a chart from a table. The table is dynamic but is simple text. The problem is that when the chart is generated all values in the table are in...

How to create a rounded rectangle using ChartJS

javascript,html5,javascript-events,javascript-library,chartjs
I am modifying my bar charts using ChartJS by adding rounded rectangles instead of straight edged like they have by default.I found the spot in the Chart.js where to declare a rounded rectangle, but I am not calling the function right. I thought after you declare your 'barchart' one can...

TypeError: this.scale undefinded when using Chart.js and Angularjs

javascript,angularjs,chartjs
I am currently trying to create a dashboard of sorts where I have an array of sets of data that I would like represented in small charts all on one page. So far, I've done my work with Chart.js and AngularJS (I am using the bower angular-chart.js module). I have...

ChartJS line chart set background color

javascript,canvas,charts,chartjs
I'm working with ChartJS and I wanted to convert the a line chart to png, but the problem is that the image always downloaded with transparent background, which is not what I need, I tried many options, nothing really worked. If someone have ever faced this problem, please suggest something...

Use transparent stroke color with chartjs pie chart

javascript,chartjs
Following the chart.js docs, I try to draw a transparent stroke line in a pie chart: var options = { segmentStrokeColor: "rgba(255,255,255,0)" }; or var options = { segmentStrokeColor: "transparent" }; But the stroke line is not drawn with these values. Of course it works if I use any other...

Missing Tooltip for some data points using chartjs

chartjs
I have a chart's which has 200 data points which plots correctly but the tool-tip doesn't appear for the last few data points. Please refer the jsbin Link Thanks...

How to delete a chart (canvas) out of its scope?

javascript,jquery,html,canvas,chartjs
I need to figure out how to delete this chart because when I create a new one in the same spot, the previous one still shows through. The user originally selects something from a dropdown. Based on that the js does a $http.get() request to a url. Then it creates...

ChartJS Doughnut Charts Gradient Fill

javascript,canvas,gradient,chartjs
So I tried to make a gradient fill for the ChartJS doughnut chart, but this only works horizontal and not in a circle. This is the code that I'm using: var ctx = document.getElementById("chart-area").getContext("2d"); var gradient1 = ctx.createLinearGradient(0, 0, 0, 175); gradient1.addColorStop(0.0, '#ACE1DB'); gradient1.addColorStop(1.0, '#7FBDB9'); var gradient2 = ctx.createLinearGradient(0, 0,...

ChartJS horizontal label are 1-2px clipped

javascript,html5-canvas,chartjs
I have same problem as mentioned on post: Make x label horizontal in ChartJS Note that for me interesting only question about y labels. How format or align "y" labels? ...

Chart Js + Angular

angularjs,chartjs
Am i missing something here? for two days i have looked through this code to see the issue just to get started. I am testing out the Chart Js plugin and i intend to use angular with it. Seems like there is some sort of conflict with my code that...

Chart.js — drawing an arbitrary vertical line

javascript,chartjs
How can I draw an vertical line at a particular point on the x-axis using Chart.js? In particular, I want to draw a line to indicate the current day on a LineChart. Here's a mockup of the chart: http://i.stack.imgur.com/VQDWR.png...

Rails 4.2 jQuery loads only after refresh

javascript,jquery,ruby-on-rails,ajax,chartjs
I have a page with a Pie chart using Chart.js which gets some data from a database and visualises them. The user enters two dates (from/to) and then he presses the Update Chart button, and the partial is loaded dynamically into the page. Unfortunately the Chart works only after refresh....

Multiple canvas, reusable gradients

jquery,canvas,chartjs
I am trying to write dry code for multiple canvas. I am applying gradients to chartjs charts and don't want to rewrite the same gradient for each chart instance. var ctx1 = $("#SoftwareChart").get(0).getContext("2d"); var ctx2 = $("#WebChart").get(0).getContext("2d"); var gradient1 = ctx1.createLinearGradient(0, 0, 0, 400); gradient1.addColorStop(0, '#ff9170'); gradient1.addColorStop(1, '#ff3f05'); var gradient2...

Truncating canvas labels in ChartJS while keeping the full label value in the tooltips

javascript,chartjs
I have some bar charts that have really long labels and they affect the size of the charts. Example: http://jsfiddle.net/norbiu/aqa8w19d/4/ I'm trying to truncate the labels that show up under the chart while keeping the label that shows up in the tooltips when hovering over a bar. The problem is...

How to work out Chartjs using TypeScript with Chartjs.definitelyTyped from github

javascript,angularjs,typescript,chartjs
I want to use chartjs(chartjs.org) as my charting tool along with angularJS using TypeScript. I have installed definitelyTyped for chartjs from github to incorporate creation of chartjs charts in my typescript written controller. I can't find any related questions on doing this thing. I just need to know how we...

Chart Js change text label orientation on Ox axis

javascript,charts,chartjs
I am using chartJS library - http://www.chartjs.org/ If the text label is too big, chartJs displays text at 45 degrees Please tell me how can I change the text rotation to 30 degrees for instance. Please see the following : var data = { labels:['Large Text Very Large','Text1','Text2'], datasets:[ {...

y-axis values are way to high

javascript,jquery,html5,charts,chartjs
I'm working with ChartJS plugin and I'm getting some unexpected results from the y-axis. It renders way to high numbers. DEMO I got some random numbers and as you can se the highest number is 11260578, but it renders up to 20000000. Is there a way to limit it to...

Chartjs display label & units when mouse is hover stats

javascript,jquery,label,chartjs
Is it possible to have the label & units when my mouse pointer is hover the chart ? For now there is only the number. For the example bellow I would like to show : 58% Label1 0% Label2 0% Label3 0% Label4 0% Label5 My options looks like this...

How to clear the data for a angular-chart

javascript,angularjs,chartjs,angular-chart
I have a nice application that displays a line chart based on several criteria. When the main criteria is changed I want to clear the current line chart. However, I cannot find out how to do this. I'm using AngulerJS v1.4.0-rc2, Chart.js v1.0.2 and angular-chart v0.7.1. When loading the page...

Load JSON to display data, using ng-repeat {ANGULAR.JS}

angularjs,chartjs
My Html: <div class="graph-display" ng-controller="jsonServerBox"> <div class="bar-chart-box" ng-repeat="module in ocw.modules"> <canvas class="chart chart-bar" data="{{module.data}}" labels="{{module.labels}}" series="{{module.series}}"></canvas> </div> </div> My JS: app.controller('jsonServerBox', function($scope, $http) { var json = $http.get('serverbox.json').then(function(res){ return res.data; }); $scope.ocw = json; }); The Chart doesn't gets displayed, don't know why? I'm not getting any error in...

How can i add an image as background in Chartjs?

background,background-image,chartjs
I am using chart.js lib on a programmable device i need to add an image as background to my chart, if that is not possible how can i change background color to black?. I cannot use Jquery as it is not supported by the Platform. Thank you...

Connecting Chart.js to MySQL database

javascript,php,mysql,chartjs,chart.js
I have this script in my html document which creates a chart using Chart.js. The data in it are manualy inserted ( The labels and the data in datasets). The data in datasets are now randomly generated numbers. But I need to somehow connect it with my MySQL database. <script>...

Display a single tooltip with Chart.JS?

javascript,chartjs
I've made a chart using Chart.JS and am hoping to limit the tooltip display to 1 single point. I have a working demo where all tooltips are currently being displayed that can be viewed here: https://jsfiddle.net/p2yd6hut/ var data1 = { labels : ["SUN","MON","TUE","WED","THU","FRI","SAT"], datasets : [ { fillColor : "rgba(255,255,255,.1)",...

ChartJS - Different color per data point

javascript,angularjs,linechart,chartjs
Is there a way to set a different color to a datapoint in a Line Chart if its above a certain value? I found this example for dxChart - http://stackoverflow.com/a/24928967/949195 - and now looking for something similar for ChartJS...

diplay barchart in a

dart,chartjs
I try to make this question short, I would like to show the chart in the yellow block, and not below as shown in the screenshot: Unfortunatelly I have no idea how to bind the div with the chartobject. Below is the sorce code: <!-- import polymer-element's definition --> <link...

Problems hovering over ChartJS bar chart after being redrawn

javascript,knockout.js,chartjs
I'm using ChartJS with KnockoutJS and I'm having some problems sorting one of my bar charts. Here's an example: http://jsfiddle.net/norbiu/aqa8w19d/ After hitting the sort button on top, the bar chart is redrawn correctly, but if I try hovering over the right side of the chart, it jumps back to the...

Line ChartJS empty / null values doesn't break the line

null,break,chartjs
I want to break the line of the chart when values is null or empty, but I can't. Perhaps I miss something? var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data:...

How can I add dataset toggle to Chart.js?

linechart,chartjs
GOAL: Clicking on chart legend I want to show/hide corresponding line. I am using Chart.legend.js to create legend. I know How to add a dataset toggle to Chart.js? asked the same question but I cannot use jQuery. Any idea? Thank you...