Newbe Dev Stack

Answer : you can change the color by scales configuration under chart options: type: '...', data: {...}, options: { scales: { xAxes: [{gridLines: { color: "#131c2b" }}], yAxes: [{gridLines: { color: "#131c2b" }}] } } I know this question was asked over 2 years ago and the OP has already marked a correct answer, but I have a solution to the problem that the OP mentioned in the comments of the marked answer and I'd like to solve it to save other people some time. But this changes the color of the axis and all the gridLines, what if I just want to change the axis color? For example, I want the axis line solid black and the grid lines grey. If you're trying to achieve this, then the marked answer won't do it for you but the following should: yAxes: [{ gridLines: { zeroLineColor: '#ffcc33' } }] In the Charjs.JS to style the scale label and ticks we can u...

Answer : Here are some commercial providers that have the type of chart you're looking for: ChartFX for .NET - Gallery of available charts including 3D surface Nevron Chart for .NET - Gallery of available surface charts You may have already come across this, but I thought I'd point out the CodeProject article Plot 3D surfaces . I'm not sure if it's feature set is sufficient for your requirements, but it's worth investigating if you haven't already. The obvious advantage is that it's free and open source (so that you might expand it for your particular needs). Example screenshot: Another possible alternative that looks reasonably complete is the F# for Visualization library. This is commercial, but by the look of it would do more that what you might need. Don't let the fact that it is designed for F# put you off - you should still to use it directly from C# (or perhaps with a minor amount of interop to make things cleaner). Certainly, the...

Answer : You can extend the chart to do this Preview Script Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut); Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({ draw: function (ease) { var ctx = this.chart.chart.ctx; var easingDecimal = ease || 1; Chart.helpers.each(this.getDataset().metaData, function (arc, index) { arc.transition(easingDecimal).draw(); var vm = arc._view; var radius = (vm.outerRadius + vm.innerRadius) / 2; var thickness = (vm.outerRadius - vm.innerRadius) / 2; var angle = Math.PI - vm.endAngle - Math.PI / 2; ctx.save(); ctx.fillStyle = vm.backgroundColor; ctx.translate(vm.x, vm.y); ctx.beginPath(); ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI); ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math....

Answer : 1. Create Class .chart-container { position: relative; margin: auto; height: 80vh; width: 80vw; } 2. Create Div With class chart-container and place canvas tag inside it. <div class="chart-container"> <canvas id="canvas"></canvas> </div> 3. Chart options :- Use property maintainAspectRatio: false, options: { maintainAspectRatio: false, responsive: true, ...... } As from Docs for Chart.js it's recommended to wrap canvas into container div and change width/height of the container. But basically it's changing either by given width or height. Found a more flexible custom solution from lannymcnie that can be used for any canvas responsiveness: var stage = new createjs.Stage("canvas"); var c = new createjs.Shape(); c.graphics.f("#f00").dc(0,0,50); // Drawn a 100x100 ci...

Answer : I believe that creation of color schemes is a whole science of its own. It makes sense to me that something like that has been left out of Chart.js, since there are more critical goals to pursue. All colors used in chart examples in the docs are defined explicitly. And this two-month-old issue features a categorical response from a Chart.js member that default colors are not available in Chart.js 2. So, you have three choices. The first choice is to make some colors yourself. I guess you would not have asked the question, had you been into something like that (I know that the results would be horrible, if I did something like that). The second choice is to look for color schemes and color scheme generators online and pick some color schemes that please you. The third and interesting choice is to look for a JavaScript library that can produce color schemes at will. There are a couple of alternative choices. A nice one, which is available under very permissive lic...

Answer : Here's an idea you could try. Make a dictionary from your labels and colors, so each color is mapped to a label. Then, after making the pie chart, go in an assign the facecolor of the wedge using this dictionary. Here's an untested bit of code which might do what you are looking for: import numpy as np import matplotlib.pyplot as plt def mypie(slices,labels,colors): colordict={} for l,c in zip(labels,colors): print l,c colordict[l]=c fig = plt.figure(figsize=[10, 10]) ax = fig.add_subplot(111) pie_wedge_collection = ax.pie(slices, labels=labels, labeldistance=1.05)#, autopct=make_autopct(slices)) for pie_wedge in pie_wedge_collection[0]: pie_wedge.set_edgecolor('white') pie_wedge.set_facecolor(colordict[pie_wedge.get_label()]) titlestring = 'Issues' ax.set_title(titlestring) return fig,ax,pie_wedge_collection slices = [37, 39, 39, 38, 62, 21, 15, 9, 6, 7, 6, 5, 4...

Answer : Chart.js is great, but has small number of chart types. Chart.js is lib to use provided charts, not to create own chart types. D3.js is lib for producing data visualizations. See examples. You can find few treemap examples (i.e. this or this) done with d3.js This snippet is an example of the treemap module for chart.js. Also here are more examples and the documentation. var topTags = [ {tag:'python',num:133269},{tag:'javascript',num:109742},{tag:'java',num:65490},{tag:'c#',num:45445},{tag:'html',num:43767},{tag:'android',num:42657},{tag:'reactjs',num:38844},{tag:'php',num:34381},{tag:'sql',num:29996},{tag:'python',num:29942},{tag:'css',num:29654},{tag:'r',num:28319},{tag:'c++',num:27389},{tag:'node.js',num:25415},{tag:'angular',num:24093},{tag:'pandas',num:23826},{tag:'arrays',num:23075},{tag:'jquery',num:18968},{tag:'...

Answer : I had a battle with this today too. You need to get a bit more specific with your dataset. In a line chart "datasets" is an array with each element of the array representing a line on your chart. Chart.js is actually really flexible here once you work it out. You can tie a line (a dataset element) to an x-axis and/or a y-axis, each of which you can specify in detail. In your case if we stick with a single line on the chart and you want the "time" part of the entry to be along the bottom (the x-axis) then all your times could go into the "labels" array and your "number" would be pin-pointed on the y-axis. To keep it simple without specifying our own scales with x and y axes and given this data: var MyData = [{time:"10:00", number: "127"}, {time:"11:00", number: "140"}, {time:"12:00", number: "135"}, {time:"13:00", numbe...

Answer : There is no built-in functionality for number formatting in Javascript. I found the easiest solution to be the addCommas function on this page. Then you just have to modify your tooltipTemplate parameter line from your Chart.defaults.global to something like this: tooltipTemplate: "<%= addCommas(value) %>" Charts.js will take care of the rest. Here's the addCommas function: function addCommas(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } Put tooltips in 'option' like this: options: { tooltips: { callbacks: { label: function(tooltipItem, data) { return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); } } ...