Develop Reference

How to change the Highchart plotline color for theme

I am trying to make a chart where the plotline is by default white in color.
Now, when changing the theme of the page, I want to change the plotline color from whtie to black for light theme. Here is my code:
Highcharts.chart('container', {
chart: {
backgroundColor: '#000',
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
color: '#FFF',
width: 2,
value: 5.5,
dashStyle: 'dash'
}]
},
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]
}]
});
on the image the plotline is white, but I want it to be black only when changing the light theme.
Suggestion please, thanks in advance.

In Highcharts we've got something that is called themes. We've got plenty of them and you can find them here: https://github.com/highcharts/highcharts/tree/master/ts/masters/themes
I also suggest reading about creating your own theme, which is something that I believe you're looking for: https://www.highcharts.com/docs/chart-design-and-style/themes#creating-your-own-theme
Demo of creating a theme that is similar to the one from your image: https://jsfiddle.net/BlackLabel/g05sancb/
Highcharts.theme = {
chart: {
backgroundColor: '#000'
},
xAxis: {
plotLines: [{
color: '#FFF',
width: 2,
value: 5.5,
dashStyle: 'dash'
}]
}};

Show Columns in Highcharts on different X-Axis (side by side)

I've tried to add multiple series to different X-Axis on a column chart. My problem is, that Highcharts reserve space for each column series, but in my case the series are uniqe to one X-Axis and they are not overlapping. So I don't want to reserve space for columns that are never appear in the group.
Here is an example: https://jsfiddle.net/Kanatorabo/qs0vuehk/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Columns centered in category'
},
subtitle: {
text: 'Null or missing points are ignored'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
gridLineWidth: 1,
offset: 0,
left: "20%",
width: "80%",
}, {
categories: ['2018', '2019', '2020'],
gridLineWidth: 1,
offset: 0,
width: "20%",
}],
plotOptions: {
series: {
centerInCategory: true,
//pointPadding: 0,
},
/*column: {
grouping: false,
shadow: false,
pointPadding: 0.2,
}*/
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, null, null, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name: "data1",
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
name: "data2",
}, {
data: [71.5, 106.4, 129.2, null, null, 135.6, 148.5, null, 194.1, 95.6, 54.4, 29.9],
name: "data3",
}, {
data: [null, 70.5, 99.4],
colorIndex: 0,
name: "data1 preVal",
linkedTo: 0,
xAxis: 1,
}, {
data: [null, 60.5, 89.4],
name: "data2 preVal",
colorIndex: 1,
linkedTo: 1,
xAxis: 1,
}, {
data: [null, 80.5, 69.4],
colorIndex: 2,
name: "data3 preVal",
linkedTo: 2,
xAxis: 1,
}]
});
In 2019/2020 and Feb/Mar there is a reserved space for 6 columns and the width of all columns is calculated as if 6 columns exists.
Thank you in advance

It looks like a bug, I reported it on the Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/15503

Highcharts set Series Text Colour

This may sound like a really simple question but I've spent hours trying to accomplish this and it's making me feel very frustrated.
Please can someone tell me how to set the colour of the name in a series?
I was able to fully configure all other aspects of my chart but the series name remains black.
I saved one of the Highchart examples here http://jsfiddle.net/ktnexbcr/ how do I set the text "Meteorological data" in the series to blue or red or anything other than black.
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],
name: 'Meteorological data',
color: "red",
font-color: "blue" ??? <-- how
}]
Is it simply not possible?
Thank you,
Dan

Legend is what your after, you need to look in the docs http://www.highcharts.com/docs/chart-design-and-style/themes
$(function () {
$('#container').highcharts({
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],
name: 'Meteorological data',
color: "red",
}],
legend: {
itemStyle: {
color: 'blue'
}
}
});
});
fiddle here

You need to use legend.labelFormat or legend.labelFormatter. For example:
legend: {
labelFormat: '<span style="color:{color}">{name}</span>'
},
Demo: http://jsfiddle.net/ktnexbcr/2/

you can set common styles using following codes across charts
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'serif'
}
}
});
to set legend color
legend: {
itemStyle: {
color: 'red',
fontWeight: 'bold'
}
},
highcharts example
For more available option, refer this link

How to increase width between two bar in highcharts.js

The bar chart demo is here,
jsfiddle
I want to increase the width between different bars, What configuration should I set ? please give me some advice. thks!

To increase width between two bar in highcharts.js you can use groupPadding,
API: http://api.highcharts.com/highcharts#plotOptions.bar.groupPadding
Example: http://jsfiddle.net/6j3y54na/2/
groupPadding: 0.2
If you want to increase gap between bars in same group then you can use pointPadding
API: http://api.highcharts.com/highcharts#plotOptions.bar.pointPadding

Use pointWidth property, a pixel value specifying a fixed width for each column or bar:
plotOptions: {
series: {
stacking: 'percent',
pointWidth: 5
}
},
JSFiddle

pointWidth is the parameter to set the width for bar width .Refer this jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 50,
marginBottom: 90
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'percent', pointWidth: 4
}
},
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]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
});

Pie Chart With Pattern fill : Jqplot Issues

I am using jqplot for making pie chart.. In this i want to create a pie chart like following image..
It is Possible to do that?? using jqplot

I couldn't find a solution for jqPlot, but used highcharts instead. You can check the demo
code:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Pattern fill plugin demo'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
plotBands: [{
from: 100,
to: 200,
color: {
pattern: 'https://rawgithub.com/highslide-software/pattern-fill/master/graphics/pattern3.png',
width: 6,
height: 6
}
}]
},
series: [{
type: 'area',
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],
fillColor: {
pattern: 'https://rawgithub.com/highslide-software/pattern-fill/master/graphics/pattern1.png',
width: 6,
height: 6
}
}, {
type: 'column',
data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
color: {
pattern: 'https://rawgithub.com/highslide-software/pattern-fill/master/graphics/pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
});