How to style images in highcharts flags? - javascript

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

Related

Highcharts: Auto-scale rendered shape along with chart?

I've placed a box shape on the chart using chart.renderer.rect(). I want that box to get skinnier (the same way the chart does) when I resize the page horizontally.
I can see in the inspector that the width attribute of all the SVG chart elements is getting changed as I resize the page but not my rendered box shape. How are they doing this? Is there some property I have to add to my rendered box shape?
I also noticed the add() method takes a parent but I can't figure out how to get the SVGElement from the chart I'm adding it to and I'm not sure setting the parent would give me the auto-scaling I want anyway.
You can store reference to an element and edit it's attributes, for example based on axis values. Example:
chart: {
events: {
render: function() {
const chart = this;
const xAxis = chart.xAxis[0];
const yAxis = chart.yAxis[0];
const startX = xAxis.toPixels(1);
const startY = yAxis.toPixels(7);
const width = xAxis.toPixels(6) - startX;
const height = yAxis.toPixels(4) - startY;
if (!chart.customRect) {
chart.customRect = chart.renderer.rect().attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow'
}).add();
}
chart.customRect.attr({
x: startX,
y: startY,
width,
height
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/p6743jam/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

How to dynamically set pie piece text colour on a C3 chart

I have a C3 pie chart similar to this online example. In my case I set the data.colors based on incoming external data.
My setup looks like the following (I pass in the colors to use)...
this.pieChart = generate({
data: {
columns: columns,
colors: colours,
type: 'pie',
onclick: (e) => {
this.handlePieClick(e.id);
},
},
bindto: '#pie-chart',
tooltip: {
show: false
},
transition: {
duration: 1000
},
legend: {
item: {
onclick: id => {
this.handlePieClick(id);
}
}
},
});
My app has not control over these colors. When the colors are light, the white text is hard to see. I may have a mixture of light and dark colours. What I need to do is examine each color and then be able to set the text either white or black for each pie piece text color, however I can see no callback function I can override to do this.
Does anyone know a way to do this? The big thing being I have no control over the colors coming in, and need to set the text colors in code once I have the color data.
Thanks in advance for any help!
Use the onrendered: option in the c3 configuration
In there, loop through the colours, and for each
Construct a new colour that shows up against the pie colour
Apply it to the text in the right segment using the class definitions (doable as the colour map and the pie segments element classes both contain the names of the data series)
http://jsfiddle.net/shxLfss3/2/
onrendered: function () {
var colEntries = d3.entries(this.config.data_colors);
colEntries.forEach (function (colEntry) {
// get pie segment colour, make a contrasting colour from it
var hsl = d3.hsl(colEntry.value);
hsl.l = hsl.l > 0.5 ? 0 : 1; // make black if light, white if dark
var newCol = hsl.toString();
// apply that color to the segmenbt's text
var segment = d3.select(this.config.bindto+" .c3-chart-arc.c3-target-"+colEntry.key);
segment.select("text").style("fill", newCol);
}, this);
}

Hover color on Kendo UI Bar Chart bars

I am trying to find a way to completely change the color of a Kendo UI Bar Chart bar when it is hovered over. I do know that there is the series.highlight.color config option, but this seems to add only a tint in that color. I am wanting to completely replace the normal bar color with a different hover color. I have been pouring through the docs but can't seem to find a configuration option to do this even though it seems like there has to be a way to do this through Kendo config options without having to resort to hacking it.
Any help is much appreciated!
You can use the series.highlight.visual property to draw the bar with a solid color:
$("#chart").kendoChart({
series: [{
type: "bar",
data: [1, 2],
highlight: {
visual: function(e) {
var origin = e.rect.origin;
var bottomRight = e.rect.bottomRight();
var topRight = e.rect.topRight();
var topLeft = e.rect.topLeft();
var c = "green";
var bc = "#555";
var path = new kendo.drawing.Path({
fill: {color: c,opacity: 1,},
stroke: {color: bc,opacity: 0.7,width: 2,}
})
.moveTo(origin.x, bottomRight.y)
.lineTo(bottomRight.x, bottomRight.y)
.lineTo(topRight.x, topRight.y)
.lineTo(topLeft.x, topLeft.y)
.close();
return path;
}
}
}]
});
DEMO
Within the visual function you can get at the item and base the color on value or another field, etc.

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();

In raphaeljs, is there a way to place text within an object to keep rollover state

In creating a svg map using raphael js where I have hover states. How ever I am trying to write the country names onto the map. The problem I am facing is the names become their own object and block the country so I loose hover and click when the cursor is directly over the text. Is there a way where I can draw the text and not have it block the map. I've tried set() but with no sucess.
Thanks,
What I have below doesn't have the text() or print() included:
var r = Raphael('map', 1450, 2180);
arr = new Array();
for (var country in paths) {
var obj = r.path(paths[country].path);
countryName = paths[country].name;
color = paths[country].color;
scolor = paths[country].stroke;
obj.attr({fill:color,stroke:scolor,
'stroke-width': 1,
'stroke-linejoin': 'round'});
arr[obj.id] = country;
obj
.hover(function(){
console.log(arr[this.id]);
this.animate({
fill: paths[arr[this.id]].hover
}, 300);
}, function(){
this.animate({
fill: paths[arr[this.id]].color
}, 300);
})
});
Try setting the pointer-events attribute to none for the text elements.
Documentation:
http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty

Categories