I'm trying to change the background color of the picture and not the div's background, as follows:
var availability= $("#availability").highcharts();
availability.panes[0].options.background.backgroundColor = "#000000"
but not changing the color in any way, does anyone have any idea what could be wrong?
From the Highcharts API documentation examples, you will define this in the json object that declares your chart object.
$(function () {
$('#container').highcharts({
chart: {
backgroundColor: '#FCFFC5',
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'left',
x: 100,
verticalAlign: 'top',
y: 70
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
plotOptions: {
},
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]
}]
});
});
Probably you would want to access this object in memory and change values rather than try to access the DOM object as it will most likely redraw on some event to take its property values from the original JSON object.
Could change the background color of the bow as follows:
$("#availability").find(".highcharts-series path").attr("fill", "#000000");
You can manipulate on SVG element, directly, calling attr() function.
$('#bck').click(function() {
var chart = $('#container-speed').highcharts();
chart.yAxis[0].plotLinesAndBands[0].svgElem.attr({
fill:'red'
});
});
Example: http://jsfiddle.net/snxe1bzk/5/
Related
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'
}]
}};
I'd like the yAxis labels not to overflow, and also not to overlay on top of the plotted chart. As you can see from the example, they do:
Highcharts.chart('container', {
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: ''
},
opposite: true,
labels: {
align: 'right'
}
},
series: [{
data: [209.9, 71.5, 106.4, 1209.2, 1404.0, 1706.0, 135.6, 1408.5, 216.4, 194.1, 95.6, 54.4]
}]
});
http://jsfiddle.net/uo6shmuL/
I've tried different positioning but I can't see to figure it out without manually setting offsets and padding, which doesn't work because my data is dynamic. How do I get this similar highstocks example to work, where the yAxis is outside of the chart, but nothing is overflowing outside the div?
What I need:
http://jsfiddle.net/P8hrN/1/
labels: {
align: 'left'
}
Using highcharts label formatter
http://api.highcharts.com/highcharts#yAxis.labels.formatter
I'm using the code below to customize the first label, and return the values for all others. Is this how I should use return twice within the formatter? While it works i'm just checking that there isn't a better way to write the function. I'm a little new to js and wondering if the returned data could be combined some how?
Thanks
jsfiddle here
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
labels: {
//align: 'left',
//x: 0,
//y: -2,
useHTML: true,
formatter:function(){
if(this.isFirst){
return 'test';
}
return this.value;
}
}
},
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]
}]
});
});
I'm wondering that the color of the text which is inside the bar chart(plotOptions.bar.dataLabels.color) can be different if the text doesn't fit to bar length. For instance:
Code is here:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
height: 700
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
bar: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0.2,
dataLabels: {
enabled: true,
color: 'black',
align: "right",
format: '{y} M',
inside: false,
style: {
fontWeight: 'bold'
},
verticalAlign: "middle"
},
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 2.33]
}]
});
});
Thanks in advance
Possible solution is to use formatter. Determine if value is lower than some level, and then change dataLabel color. For example: http://jsfiddle.net/Yrygy/176/
formatter: function() {
var max = this.series.yAxis.max,
color = this.y / max < 0.05 ? 'black' : 'white'; // 5% width
return '<span style="color: ' + color + '">' + this.y + ' M</span>';
},
You can also compare point's width with length of y-value string.
You can set the color to contrast, and it will change depending on whether the dataLabel is inside/outside the bar.
style: {
color: 'contrast'
}
I use the "isInside" value like so:
series: [{
name: 'Percentage',
data: this.calculateChartSeries(),
dataLabels: {
enabled: true,
rotation: 0,
align: 'right',
borderWidth: 1,
formatter: function() {
if (this.point.isInside == true) {
return '<span style="color: white">' + this.y + '%</span>';
} else {
return '<span style="color: black">' + this.y + '%</span>';
}
}
}
}]
But if that doesn't work for you, it's possible to use "this.point.shapeArgs.height" and check if that height is greater than the length of your text.
I have been able to change the color of point in a graph dynamically, but when I hover over that point then the color of that point is changing to previous color.
I have a fiddle here: jfiddle
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
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]
}]
});
// the button handler
$('#button').click(function() {
chart.series[0].data[2].graphic.attr({ fill: '#FF0000' });
chart.redraw();
});
How can I change the color of the point dynamically in a graph?
I think you are looking to update the marker color dynamically.
you can use update functionality for this
chart.series[0].data[0].update();
Here is a jsFiddle for your reference. I hope this will be useful for you.
is this what you are looking for?
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-select-fillcolor/
plotOptions: {
series: {
allowPointSelect: true,
marker: {
states: {
select: {
fillColor: 'red',
lineWidth: 0
}
}
}
}
}