Highcharts contextButton color - javascript

I want to custom Highchart's export button. I read on their doc that we can easily access to the buttons style with
buttons: { contextButton: ... }
but it seems that I only can modify the symbol and I want to change the background color of the button too.
Here is an example on JSFiddle.
As we can see, the symbol's color can be changed with symbolStroke option but how can I change the background ?

You need to change the theme node of the button. For example:
Full Example
$(function () {
$('#container').highcharts({
chart: {
backgroundColor: "white"
},
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]
}],
exporting: {
buttons: {
contextButton: {
symbolStroke: "red",
theme: {
fill:"gray"
}
}
}
}
});
});
Source: http://api.highcharts.com/highcharts#exporting.buttons.contextButton.theme

If you work in styledMode, then add the following in your CSS file:
.highcharts-contextbutton {
fill: blue;
}

Related

Highchart , how to remove the margins, inside the chart? Creating a 100% zoom?

I have the following chart, and I need to delete the default internal margin (market with red boxes)
I havent been able to do so
This is my current code
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'xy',
margin: [0,0,0,0],
},
title: {text: null},
legend: { enabled: false },
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]
}]
});
https://jsfiddle.net/41z9qk2m/
This is the doc page
https://api.highcharts.com/highcharts/chart.margin
Use
xAxis ,and yAxis min max
as per
https://api.highcharts.com/highcharts/xAxis.max

How to change series legend text color in HighChart chart?

http://jsfiddle.net/n0mq739a/
I'm trying to change the series legend text color from black, to anything besides black:
$(function () {
$('#container').highcharts({
legend: {
color: '#FF0000',
backgroundColor: '#FCFFC5'
},
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]
}]
});
});
This is all I found on the legend in the HighCharts docs, is there another way to change that color?
http://api.highcharts.com/highcharts#legend
Here we go:
You need to specify itemStyle. e.g.
itemStyle:{'font-size':'30px'}
Depending on the css you want to use, you may also have to set 'useHTML'. From the documentation:
Using HTML allows for advanced formatting, images and reliable bi-directional text rendering.
Here is an example: http://jsfiddle.net/kHzr9/
Hope it helps;)

Highcharts: Individually Set Axis Category Style

Given a chart like the example for setting category label styles, how can I set styles for each label individually? E.g., make "Jan" red, "Feb" green, and so on.
Here's the pertinent part of the JSFiddle, which sets all categories to red:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
style: {
color: 'red'
}
}
},
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 could use a formatter method to wrap each label in HTML and then conditionally set its style based on this.value, but surely there's a more direct approach?

How to display grid line on top of highchart

How to display the grid line on top of chart,
I'm having red color grid line in my chart, how to display the grid line on top of chart
I'm trying by setting index in css
code:
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
gridLineColor: 'red'
},
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]
}]
});
});
Fiddle link: http://jsfiddle.net/pewx4esm/1/
Helps much appreciated
Try this:
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
gridLineColor: 'red',
gridZIndex:90
},
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]
}]
});
Go through
http://www.highcharts.com/docs/chart-and-series-types/chart-types for help regarding any property of highcharts

Highcharts - how to set textShadow for data labels

I'm trying to set textShadow property to style of data labels but it doesn't work (ignored):
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
style: {
fontWeight:'bold',
textShadow: "2px 2px #ff0000",
}
}
}
},
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]
}]
});
http://jsfiddle.net/TJFBy/
Is there a way to apply a drop shadow to data labels? The reason is to make labels look similar to graph line.
If you are working in fiddle, you should change the current JQuery library (you are working with JQuery 1.4)
You need to load hightcharts API.
<script src="http://code.highcharts.com/highcharts.js"></script>
And you should remove the 'comma' (,) next to the textShadow: "2px 2px #ff0000" line, many browsers don't render script code with sintax errors (especially IE)
Check the fiddle fixed

Categories