Background colour of line charts in chart.js - javascript

I would like to change the background colour of the line graph produced by chart.js. There doesn't appear to be an option for this, and the documentation doesn't help. Extensive searching on the interweb has yielded no results. Is this possible?
I must confess I don't really know much about the HTML5 canvas so I'm struggling a bit!

With v2.1 of Chart.js, you can write your own plugin to do this
Preview
Script
Chart.pluginService.register({
beforeDraw: function (chart, easing) {
if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
var helpers = Chart.helpers;
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
ctx.save();
ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
ctx.restore();
}
}
});
and then
...
options: {
chartArea: {
backgroundColor: 'rgba(251, 85, 85, 0.4)'
}
}
...
Fiddle - http://jsfiddle.net/rrcd60y0/

I'm not sure what you mean by "the background color of the main area of the graph that isn't occupied with the line chart", but you can set the background-color of the canvas via CSS:
#myChart {
background-color: #666;
}
Look at this fiddle to see how it affects the chart.
This will set the background for the whole canvas, if you only want to set it for the inner part, check out potatopeelings solution.

Just to help others who are thinking how to add multiple background colors:
I modified a little bit #potatopeelings answer. First I checked how many columns there are
var columnCount = chart.data.datasets[0].data.length;
var width = chartArea.right - chartArea.left;
var columnWidth = width/columnCount;
and then fill every other of them with background color
while (startPoint < chartArea.right) {
ctx.fillRect(startPoint, chartArea.top, columnWidth, height);
startPoint += columnWidth * 2;
}
For my chart this works better but for this the July column is for some reason only part of it. Doesn't know how to fix that but hopefully you can get idea from here.
http://jsfiddle.net/e7oy6yk6/2

Related

Place text in kendo donut chart

I am trying to create a semi circle donut chart to show some progress data. This I was able to complete. Further I needed to place text inside/ center of the donut chart which again I was able to do successfully. Now I have a new requirement where I need to show some text on the start and end positions of the graph(I need 0% and 100% to be shown on either axis). I tried several ways without any ado. Can you please help me with a possible solution.
Please find the dojo I created here:
http://dojo.telerik.com/Exike
This is roughly what I would like my end result to appear like:
Any suggestions for the same?
Thanks in advance.
You could add a couple of text boxes to your render function and use the bounding box to place them:
render: function (e) {
var draw = kendo.drawing;
var geom = kendo.geometry;
var chart = e.sender;
// The center and radius are populated by now.
// We can ask a circle geometry to calculate the bounding rectangle for us.
var circleGeometry = new geom.Circle(center, radius);
var bbox = circleGeometry.bbox();
// Render the text
var text = new draw.Text("33%", [0, 0], {
font: "18px Verdana,Arial,sans-serif"
});
// Align the text in the bounding box
draw.align([text], bbox, "center");
draw.vAlign([text], bbox, "center");
var text0 = new draw.Text("0%", [bbox.origin.x, bbox.origin.y + bbox.size.height / 2 ], {
font: "10px Verdana,Arial,sans-serif"
});
var text100 = new draw.Text("100%", [bbox.origin.x + bbox.size.width - 28, bbox.origin.y + bbox.size.height / 2 ], {
font: "10px Verdana,Arial,sans-serif"
});
// Draw it on the Chart drawing surface
e.sender.surface.draw(text);
e.sender.surface.draw(text0);
e.sender.surface.draw(text100);
}
Use DonutCenterTemplate for that:
<ng-template kendoChartDonutCenterTemplate>
<h3>99.5%</h3>
Accepted
</ng-template>

Which controller to use for Health Index Monitoring

I need to convert zamel code to HTML code. One of the controllers of zamel, allows monitoring of health index. I have the following controller:
The way this controller works:
It has 3 states for each standard, we have six standards: Corp,IEEE, IEC ,NEI , PTX and ABN.
Now each standard has 3 states:
OK status- Green Color.
Alert status - Yellow Color.
Danger Status - Red color.
Now if all standards are ok,then the overall health index is ok, if one standard isn't ok then overall health index is Alert or Danger.
Now I need a controller which can replace this old zamel controller.
I am currently using highcharts for my graphs so I tried to find some controllers in highcharts for health index status but without any luck.
I am open for suggestions for what to do, these are the options which stand before my eyes for current moment:
Find a controller in Highcharts and modify it.
Go for other js libraries which can help me in this situation.
Build my own controller from scratch, I will need an initial help in this option.
To narrow the options, lets say that I want to use a Highcharts controller for this mission, is it possible?
You can use renderer method from Highcharts API, if you want to make some custom drawings similar to your controller. Here you can find link to Highcharts API:
http://api.highcharts.com/highcharts/Renderer
Here you can find code that may help you with your problem:
var renderController = function(chart) {
var chart = this,
renderer = chart.renderer,
seriesController = chart.options.seriesController,
length = seriesController.data.length,
plotWidth = chart.plotWidth,
marginLeft = chart.marginLeft,
width = chart.plotWidth / length,
generalStatus = 'ok',
color;
$('.controler').remove();
Highcharts.each(seriesController.data, function(c, i) {
if (c.status === 'ok') {
color = '#119001';
} else if (c.status === 'alert') {
color = 'yellow';
generalStatus = 'alert';
} else {
color = 'red';
generalStatus = 'danger';
}
renderer.circle(width * i + (width / 2), 100, width / 2).attr({
fill: color,
'stroke-width': 1,
stroke: 'blue'
}).addClass('controler').add();
renderer.label(c.standard, width * i + (width / 2) - 2, 90).attr({
'text-anchor': 'middle'
}).addClass('controler').add();
});
color = generalStatus === 'ok' ? '#119001' : (generalStatus === 'alert' ? 'yellow' : 'red');
renderer.circle(plotWidth / 2, 300, width / 2).attr({
fill: color,
'stroke-width': 1,
stroke: 'blue'
}).addClass('controler').add();
renderer.label('General', plotWidth / 2 - 2, 290).attr({
'text-anchor': 'middle'
}).addClass('controler').add();
};
And here you can find an example how it can work: http://jsfiddle.net/pqw7pn2L/

How to change grid line width for one specific line

I need help with changing the line width(or color) on one specific grid-line on a Chartjs chart.
In the example below I would like to increase the grid-line width(or change color) of the horizontal gridline at y-axis 60 only. I have tried my best to find a solution within the Chartjs documentation but failed. Perhaps there is no support for this at the moment, and if so I'd like to know if anyone could help me add this feature.
Thank you !
You can extend the chart to override the scale draw function and draw a thicker / differently coloured line where you want
Preview
Script
Chart.types.Bar.extend({
name: "BarAlt",
initialize: function(data){
Chart.types.Bar.prototype.initialize.apply(this, arguments);
var originalScaleDraw = this.scale.draw;
this.scale.draw = function() {
originalScaleDraw.apply(this, arguments);
this.ctx.save();
this.ctx.beginPath();
this.ctx.lineWidth = this.gridLineWidth * 5;
this.ctx.strokeStyle = "rgba(120,120,220,1)";
this.ctx.moveTo(Math.round(this.xScalePaddingLeft), this.calculateY(60));
this.ctx.lineTo(this.width, this.calculateY(60));
this.ctx.stroke();
this.ctx.closePath();
this.ctx.restore();
}
}
});
and then
...
new Chart(ctx).BarAlt(data);
Fiddle - http://jsfiddle.net/udojrq57/

How to style images in highcharts flags?

In my chart, I show the user pictures for their comment date, so the users can read the comments in a tooltip using these icons. It seems like soundcloud charts. I did it using flags type and I set the shape variables as user picture url for each data item.
But I want to add also colorized border for each icons. I know, there is lineWidth and lineColor config in flags type but it doesn't work with images, it works only with default shapes flag, circlepin or squarepin.
I tried to use shape as flag and to add user images as background image, but It doesn't work.
In SVG you can not set border for the images, you need to create rect around the image: http://jsfiddle.net/xuL76rkL/1/
For example you can use load and redraw events to manage those rects, code:
var H = Highcharts;
function drawBorder() {
var chart = this;
H.each(chart.series[1].points, function(p) {
var bbox,
rect,
fontSize = 13, // it's used as default font size offet, even for the images
dim = 32; //width and height for the image
if(p.graphic) {
if(p.rectangle) {
p.rectangle.destroy();
}
bbox = p.graphic.getBBox();
rect = chart.renderer.rect(p.plotX - dim/2, p.plotY - dim/2 - fontSize, dim, dim).attr({
"stroke": "black",
"stroke-width": 2,
"fill": "transparent"
}).add(chart.series[1].markerGroup);
p.rectangle = rect;
}
});
}
$('#container').highcharts('StockChart', {
chart: {
events: {
load: drawBorder,
redraw: drawBorder
}
},
...
});
You can set an image with the shape option:
Example: shape: "url(/assets/my_image.svg)"
Documentation available here: https://api.highcharts.com/highstock/series.flags.shape

How to add outline to the active text in Fabric.js

I have used canvas in the html5 using fabric js .
I want to apply outlines to the active text on the canvas. following code I have written it is working fine but problem is when I increase the thickness of outline then it overlaps on the text that means text color disappears.
activeObject1.stroke = color;
activeObject1.strokeWidth = 5;
and one more thing by applying this I am unable to apply 2nd outline.
I got one example but it is not working with the fabricjs.
http://jsfiddle.net/vNWn6/
Fabric.js first applies a fill, followed by the stroke. You will need to invert the order in order to achieve the results.
original
_renderText: function(ctx) {
this._renderTextFill(ctx);
this._renderTextStroke(ctx);
}
Before
modified
_renderText: function(ctx) {
this._renderTextStroke(ctx);
this._renderTextFill(ctx);
}
After
version: fabric-1-7-1.js
fabric.Text.prototype.set({
fill: '#000',
stroke: '#fff',
strokeWidth: 4,
paintFirst: 'stroke', // stroke behind fill
})
since 2017-09-17
var active_obj = canvas.getActiveObject();
active_obj.stroke = '#000';
active_obj.strokeWidth = 5;
canvas.renderAll();

Categories