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
Related
I am trying to get the Series Name based on what is selected in the Highcharts graph but the label does not display the series name.
Here is the link to the code I have been working on: http://jsfiddle.net/ktjno528/
$(function () {
// create the chart
$('#container').highcharts({
chart: {
events: {
redraw: function () {
var label = this.renderer.label(this.series.name, 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{name:'S1',
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]
}]
});
// activate the button
$('#button').click(function () {
var chart = $('#container').highcharts();
chart.addSeries({name:'S2',
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
});
$('#button').unbind('click');
});
});
You are trying to access this.series.name, which returns nothing because this.series is an array of series. So you may want to use this.series[0].name or this.series[1].name depending on which series name you want to display.
See you updated JSFiddle here.
I have a highchart with a couple of line series and a scatter plot and I have set the shared tooltip property to true as in this fiddle http://jsfiddle.net/tpo4caoz/. I see that the line series are having a shared tool tip but the scatter plot is having a separate tooltip for itself.
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
shared: true
},
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],
type: 'scatter'
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
},{
data: [210.4, 190.1, 90.6, 50.4, 20.9, 70.5, 105.4, 120.2, 140.0, 170.0, 130.6, 140.5]
}]
});
});
Am I missing something here ?
you could try this
http://jsfiddle.net/8qt0d4h0/
The new highcharts can not shared tooltip in pie/scatter/flag,
so you could handle the scatter as spline , and set the lineWidth equal and set states hover equal 0 too.
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
shared: true
},
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],
type: 'spline',
"lineWidth": 0,
"marker": {
"enabled": "true",
"states": {
"hover": {
"enabled": "true"
}
},
"radius": 5
},
"states": {
"hover": {
"lineWidthPlus": 0
}
},
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
},{
data: [210.4, 190.1, 90.6, 50.4, 20.9, 70.5, 105.4, 120.2, 140.0, 170.0, 130.6, 140.5]
}]
});
});
This is the existing issue in Highcharts issue tracker
Part of the issue is that shared tooltip shouldn't work on scatter
series at all, because they are not sorted and laid out in increasing
X order. This should be noted in the docs(link).
According highcharts api http://api.highcharts.com/highcharts#tooltip.shared tooltip shared works only for ordered data and not for pie, scatter, flags etc.
Add this line of code:
Highcharts.seriesTypes.scatter.prototype.noSharedTooltip = false;
It disables Hicharts default setting which disables scatter plots from being included in shared/split tooltips. This way you do not have to use spline like others suggest, which cant lead to problems such as tooltip following the spline line.
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]
}]
});
});
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'
}
}]
});
Highcharts accepts an array of colors to use for series. I'm making a column chart with transparent fill color and I would like the border color to be the same color, but not transparent. I know I can set the borderColor per series, but I'm not sure how many series I will have. Is there a way to have the borderColor pick from an array, like the fill color does?
Here's what I have, and it works. It just becomes difficult when I am adding series programatically. http://jsfiddle.net/scHST/
$(function () {
$('#container').highcharts({
colors: [
'rgba(47,126,216,.3)',
'rgba(13,35,58,.3)',
'rgba(139,188,33,.3)',
'rgba(145,0,0,.3)',
'rgba(26,173,206,.3)',
'rgba(73,41,112,.3)',
'rgba(242,143,67,.3)',
'rgba(119,161,229,.3)',
'rgba(196,37,37,.3)',
'rgba(166,201,106,.3)'
],
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
borderColor: '#303030',
borderWidth: '2'
}
},
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],
borderColor: 'rgba(47,126,216,1)'
}, {
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],
borderColor: 'rgba(13,35,58,1)'
}, {
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],
borderColor: 'rgba(139,188,33,1)'
}]
});
});
I don't believe highcharts offers a way to set the background colors as an array unfortunately, but expanding on Rooster's suggestion, you could use a global array of colors and a function to access them, which might not be quite as convenient as you were hoping for, but it could at least bring an added benefit of handling the opacity conversion and letting you define the base colors once only, e.g.
var cols = new function() {
var rgbs = [
"47,126,216",
"13,35,58",
"139,188,33"
];
this.get = function(i, a) {
a = typeof a !== 'undefined' ? a : 1;
return "rgba(" + rgbs[i] + "," + a + ")";
};
this.all = function(a) {
var result = [];
for(var i = 0; i < rgbs.length; i++) {
result.push(this.get(i, a));
}
return result;
};
};
then use:
colors: cols.all(0.3)
and
borderColor: cols.get(0)
etc.
i.e. http://jsfiddle.net/M7Y8h/