How do I set highchart background as zebra style like below?
Color doesn't relate with data.
It is just zebra style on vertical grid of x axis.
PS. sorry about figure. I don't permission to insert image.
Thank you
|color1|color2|color1|color2|
|color1|color2|color1|color2|
|color1|color2|color1|color2|
|color1|color2|color1|color2| ...
0-----10------20------30------40
You can achieve this by using the plotBackgroundColor from the chart option combined with the alternateGridColor from the xAxis options.
Here is an example :
var color1 = 'rgba( 255, 0, 0, .3 )';
var color2 = 'rgba(255, 0, 255, .2)';
chart: {
plotBackgroundColor: color1
},
xAxis: {
alternateGridColor: color2,
...
},
...
A live example : http://jsfiddle.net/YRgBf/1/
Related
I want some customization in the Gantt chart as follows:
display some text/html on the top left section (interaction of x and y-axis)
show x Axis (header) with black color in the background and some other customization in styles but got nothing in documentation.
Please refer attached image.
https://i.stack.imgur.com/Ir1gN.png
You can render text via SVG renderer, set position from the plot area. What interaction section do you mean, could you show screenshot?
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Gantt chart is draw by line, and draw automatically, you can't find background options for axis in our documentation.
Possibility to make this is draw rectangle by SVG renderer and set them under draw line.
chart: {
events: {
render: function() {
var chart = this,
series = chart.series,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth;
if (chart.myBackground) {
chart.myBackground.destroy();
}
chart.myBackground = chart.renderer.rect(plotLeft, plotTop, plotWidth, 50, 0)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
opacity: 0.5,
zIndex: -1
})
.add();
}
}
},
Live demo:
https://jsfiddle.net/BlackLabel/xmg31aez/
I want to increase the chart grid lines to fill the width of the graph.
I have got it till this point: https://jsfiddle.net/mukeshshamra1201/8pu9a5c4/97/
I have used y-axis property to achieve something, but I am not able to figure out the rest.
yAxis: {
min: 0,
title : "",
gridLineDashStyle: 'ShortDash',
labels: {
align :"left",
x:-6,
y:-3
}
}
I want something kike this :
Set spacingLeft and spacingRight to 0:
chart: {
...
spacingLeft: 0,
spacingRight: 0
}
Live demo: https://jsfiddle.net/BlackLabel/3Lpsz0hd/
API Reference: https://api.highcharts.com/highstock/chart.spacing
I have a requirement to set the color of stack column chart in relation with previous stack.
Consider this fiddle. http://jsfiddle.net/0n7g4a1e/
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'Actual'
}, {
name: 'John',
data: [3, 4, 4, 2, 5],
stack: 'Budget'
}]
If Jane - Actual is light green, Jane - Budget should be dark green. This should be for all categories, Apple through bananas.
similarly if John - Acutal is light blue, John - budget should be dark blue.
How can this be done? I dont want to specify each point color, i am fine with automatic color that gets selected, just that the bugdet series should have a shade darker than the actual.
Thanks.
You need to set colors for Highcharts in that way, for example, basing on default colors:
var colors = Highcharts.getOptions().colors.slice(0), // get default colors
dark = -0.5;
colors[1] = Highcharts.Color(colors[0]).brighten(dark).get(); // using Highcharts.Color(), get darker golor, using first color as base
colors[3] = Highcharts.Color(colors[2]).brighten(dark).get();
Now just set this colors:
$('#container').highcharts({
chart: {
type: 'column'
},
colors: colors,
Demo: http://jsfiddle.net/0n7g4a1e/2/
colors = ['#195594', '#a4d3fd', '#dde0e0'];
and then
Highcharts.chart('your_char_id', {
chart: {
type: 'column'
},
colors: this.colors,
});
You can use an hex color as:
var colors = [];
colors[0] = '#ff0000';
colors[1] = '#ff6600';
and then use:
Highcharts.chart('your_char_id', {
chart: {
type: 'column'
},
colors: colors,
Hi I'd like a 1px gray line in between each horizontal bar.... (keeping the bars the same thickness)
http://jsfiddle.net/gpaosxwe/1/
I've had a brief try of
grid
and
tick
though I might have overlooked something...
You can do this with the following combination of properties:
categories:[],
gridLineWidth:1,
tickInterval:1,
tickmarkPlacement:'between',
(tickmarkPlacement is key, which only works for categorized axes)
Example:
http://jsfiddle.net/jlbriggs/gpaosxwe/6/
References:
http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
http://api.highcharts.com/highcharts#xAxis.gridLineWidth
http://api.highcharts.com/highcharts#xAxis.gridLineColor
http://api.highcharts.com/highcharts#xAxis.tickInterval
What you are looking for is borderWidth, pointPadding and groupPadding. You could do something like :
plotOptions: {
bar: {
borderWidth: 1, //Define a border of 1px to each bars
pointPadding: 0, //Define space between two bars
groupPadding: 0, // Define space between each value groups
...
},
...
}
See JSFiddle here.
Referring to this demo:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/heatmap/
where the color change is defined in the colorAxis:
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
The color change is gradual in this case. How to set it as several thresholds?
For example, I want three thresholds:
<=100: green #00FF00
100~200: orange #FF8000
>=200: red #FF0040
How should I define the colorAxis?
You can use dataClasees in your colorAxis:
Example:
http://jsfiddle.net/jlbriggs/uwrtts2k/
Reference:
http://api.highcharts.com/highmaps#colorAxis.dataClasses