I want to set the opacity of a single bubble in HighCharts.
I tried setting fillOpacity to the options of the data of the bubble.
I also tried to use RGBA on the fillColor of the data of the bubble. Like this:
chart: {
type: 'bubble',
zoomType: 'xy'
},
series: [{
marker: {
fillColor: 'rgba(47,226,216,1)',
fillOpacity: 0.8
},
data: [{
x: 10,
y: 90,
z: 79,
marker: {
fillColor: 'rgba(47,226,216,0.5)',
fillOpacity: 0.5
}
}, [90, 10, 60],
[50, 50, 1]
]
}]
See jsFiddle http://jsfiddle.net/kzoon/2Gbja/
But that didn't change the opacity (changing the color of the first bubble DOES work, but not it's opacity)
Try to set color, instead of fillColor, and set it for point: http://jsfiddle.net/2Gbja/1/
data: [{
x: 10,
y: 90,
z: 79,
color: 'rgba(47,226,216,0.1)'
}, [90, 10, 60],
[50, 50, 1]
]
Related
New to Highcharts, trying to generate waterfall chart with stacking only on intermediate stack. (image below)
Please help.
enter image description here
You should be able to achieve something like this by adding these stacking columns as an additional series to the waterfall chart. I think that everything is clearly showed in the demo.
Demo: https://jsfiddle.net/BlackLabel/tmyrk21f/
{
type: 'column',
pointPadding: 0,
stacking: 'normal',
data: [
// First stack
{
y: 50000,
x: 0,
color: 'red'
}, {
y: 50000,
x: 0,
color: 'orange'
}, {
y: 20000,
x: 0,
},
// Second stack
{
y: 500000,
x: 3,
color: 'red'
}, {
y: 400000,
x: 3,
color: 'orange'
}, {
y: 20000,
x: 3,
},
// Third stack
{
y: 145000,
x: 6,
color: 'red'
}, {
y: 100000,
x: 6,
color: 'orange'
}, {
y: 100000,
x: 6,
}
]
}
API: https://api.highcharts.com/highcharts/series.column.groupPadding
API: https://api.highcharts.com/highcharts/series.line.stacking
I'm playing with bullet chart and can't make bullet higher and bands thinner.
What I have:
What I want:
I'm tried set thickness but it's not helps:
plotBands: [
{
from: 0,
to: 50,
color: "#61Cd8D",
thickness: '5%'
}
Here is example:
https://jsfiddle.net/e9z5rvat/2/.
Help me please
Plot lines occypy the entire height of the plot area, and series is not visible outside of it. As a solution, instead of using plot lines, you can add a stacked column series:
series: [{
stacking: 'normal',
type: 'column',
groupPadding: 0.1,
pointPadding: 0,
enableMouseTracking: false,
data: [{
x: 0,
y: 50,
color: "#61Cd8D"
},
{
x: 0,
y: 50,
color: "#E6E4A5"
},
{
x: 0,
y: 51,
color: "#F0A434"
}
]
}, {
data: [{
y: 0,
target: 45
}],
groupPadding: 0,
pointPadding: 0,
targetOptions: { // Options related with look and position of targets
width: '100%', // The width of the target
height: 5, // The height of the target
borderWidth: 0, // The border width of the target
borderColor: 'black', // The border color of the target
color: 'black' // The color of the target
}
}]
Live demo: https://jsfiddle.net/BlackLabel/wjyadh7f/
API Reference: https://api.highcharts.com/highcharts/series.column.groupPadding
I have tried config gauge highchart like
This is my code jsfiddle code
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
}
I want to make larger for width of circle, change the color of line.
Please help me, thank you.
You can add thickness property of each plotBand
plotBands: [{
thickness: 50,
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
thickness: 50,
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
thickness: 50,
from: 160,
to: 200,
color: '#DF5353' // red
}]
And to change the color of line use dial option to your series
series: [{
name: 'Speed',
dial: {
backgroundColor:'#D9972E',
radius: '100%',
baseWidth: 5,
baseLength: '5%',
baseWidth: 10,
rearLength: '0%',
},
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
https://jsfiddle.net/viethien/8q56hmz2/17/
I am working on a project and I would like to use bar chart(HighChart) to indicate values. I prefer to use bar chart of this kind-
bar chart image
If any one have worked on this type of bar chart or have any idea of how to implement it, please share. Thanks in advance.
Set axis min max and then create an additional series which will complete the first series data to the axis max. For the additional, dummy series set options like enableMouseTracking or showInLegend to false so it wont inteact with the user.
yAxis: {
min: 0,
max: 700
},
plotOptions: {
series: {
grouping: false,
borderWidth: 0
}
},
series: [{
enableMouseTracking: false,
linkedTo: 1,
data: [{
y: 700,
color: 'rgba(66, 134, 244, 0.5)'
}, {
y: 700,
color: 'rgba(206, 49, 28, 0.5)'
}]
}, {
dataLabels: {
enabled: true,
style: {
fontSize: '20px',
textOutline: null
}
},
data: [{
y: 107,
color: 'rgba(66, 134, 244, 1)'
}, {
y: 31,
color: 'rgba(206, 49, 28, 1)'
}]
}]
example: http://jsfiddle.net/sL5bpep3/
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day