I am using Highcharts for the first time and it seems pretty impressive.
However I am trying to achieve something similar to:
Is it possible by using Hightcharts? I know you can add gradients to pie charts, however I can't find anywhere how do I achieve that. Can I set background image to the chart?
It is possible to set a background image or gradient using:
chart: {
type: 'line',
plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg'
},
or
chart: {
type: 'line',
plotBackgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
}
},
http://api.highcharts.com/highcharts#chart.plotBackgroundImage
or
http://api.highcharts.com/highcharts#chart.plotBackgroundColor
However, this is the background to the plot area, not to the line itself. To give the line a graduated color, you can specify the color of the series as a gradient. e.g.
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
color: {
linearGradient: [0, 0, 0, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(100, 100, 155)']
]
}
}]
http://jsfiddle.net/wXqM9/
The syntax for linearGradients are:
linearGradient: [x1, y1, x2, y2]
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(100, 100, 155)']
]
This specifies two points in the gradient and the colours to use. In this case, the gradient will go from (255,255,255) at the start to (100, 100, 155) and the end. If you specified 3 stops, then you can make the gradient go from one colour to another at the middle, to another at the end. Hope this helps. I suggest you just try playing around with this in the jsfiddle I posted to see how it works.
To set background of a chart use chart.plotBackgroundImage. If you want to set image for whole chart, use CSS styles for container.
Regarding gradient, it works, take a look: http://jsfiddle.net/Fusher/2Gzkd/3/
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'red'],
[0.5, 'green'],
[1, 'blue']
]
},
Related
I'm looking to set a gradient color for my graph area's where the color goes from it's "default" color to white/transparent.
I'm working how can I "Choose" not set a value and let it auto decide the area color.
This is what my code is producting now:
image of my graph now
(I'm looking to match the fill color to the "outline" color that's auto set)
Code that's being used to set this "yellow-ish color" right now
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, "#ffff00"],
[
1,
Highcharts.color("#DADADA")
.setOpacity(0)
.get("rgba")
]
]
},
You can use getOptions method to get the default color and set it in this way:
series: [{
...,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4910/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.getOptions
i want to add round corners to radial bar using highcharts is there a way i can do it?
I was able to add round corners to simple column chart using 'borderRadius'. Here is an example
https://jsfiddle.net/agbvnm91/1/.
column: {
stacking: 'normal',
borderWidth: 0,
pointPadding: 0,
groupPadding: 0.01,
pointWidth: 10,
borderRadius: 10
}
But it's not working for radial bar. Here is example of what I tried https://jsfiddle.net/agbvnm91/1/.
My chart: https://jsfiddle.net/qsexy0md/1/
It is white on the sides at the start, end point of chart and no gradient at the middle peaks. I am looking for a way to show gradient uniformly throughout the area. Maybe an outer white shadow along the curves will do or any kind of gradient.
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#993989'],
[1, '#ffffff']
]
}
Is there a way to add a plotband that has a smooth transition? Before I am using
addPlotLine and
addPlotBand
chart.yAxis[0].removePlotBand('plot-band-1');
chart.yAxis[0].removePlotLine('plot-line-1');
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
chart.yAxis[0].addPlotBand({
from: 100000,
to: y,
color: {
linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },
stops: [
[0, 'rgba(46, 230, 0, 0.22)'],
[1, 'rgba(46, 230, 0, 0)'] //down
]
},
id: 'plot-band-1'
});
chart.yAxis[0].addPlotLine({
value: y,
color: 'red',
width: 2,
id: 'plot-line-1'
});
to plot the point on a dynamic chart, but now I am using animate to make the plotting smoother
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotLine.animate({
translateY: newY
}, 300);
Also I am trying the solution from this Highcharts plotBand animation. however it seems that I am unable to implement it properly.
For your reference here is the code of where is used addPlotLine and addPlotBand and this is the current code style being used. Appreciate your help with this. Thank you.
If you pass path d attribute as an array, you can animate it as a simple shape.
Add the plotband before setiInterval and animate it as the plotline on every interval.
const plotbandPath = plotband.svgElem.d.split(' ')
plotbandPath[7] = plotbandPath[9] = newY
plotband.svgElem.animate({
d: plotbandPath
}, 300)
example: http://jsfiddle.net/sqer2x13/
I have a chart of type"scatter" that I want to change the size of the data point dots, depending on the value at the y axis. fiddle: http://jsfiddle.net/g14dkv63/1/
the above example sets the radius of the dots to '8',
plotOptions: {
series: {
marker: {
radius: 8
}
}
},
however is it possible to set the radius dynamically depending on the count/value of the dot, given the range of radius between 2px to 20px, 2px for the min value and 20px for the max value.
Each point can have a different marker radius, so map your points to:
{
y: value,
marker: {
radius: /* calculated radius */
}
}
Mapping data:
var dataMax = Math.max.apply(null, data)
var dataMin = Math.min.apply(null, data)
var range = dataMax - dataMin
var rMax = 20
var rMin = 2
var mappedData = data.map(v => {
var relSize = ((v - dataMin) / range)
var radius = Math.floor(rMin + relSize * (rMax - rMin))
return {
y: v,
marker: {
radius: radius
}
}
})
example: http://jsfiddle.net/2faLd444/
One note about the size of the bubble:
The human visual system naturally experiences a disk's size in terms of its area. And the area of a disk—unlike its diameter or circumference—is not proportional to its radius, but to the square of the radius. So if one chooses to scale the disks' radii to the third data values directly, then the apparent size differences among the disks will be non-linear and misleading. To get a properly weighted scale, one must scale each disk's radius to the square root of the corresponding data value v3
src: https://en.wikipedia.org/wiki/Bubble_chart#Choosing_bubble_sizes_correctly
So according to that note, if you want the bubbles to be proportional you need to take the square of the radius.
You can use a bubble chart for this (needs highcharts-more.js). When you use categories (as in your chart), each item in the data array needs to be an array with two elements: the Y value and the bubble size.
Highcharts.chart('container', {
chart: {
type: 'bubble'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
.map(function(x) { return [x, x]; })
}]
});
http://jsfiddle.net/g14dkv63/2/