Can you please take a look at this Demo and let me know How I can control CSS rules of Highchart element like Title or Back color?
I know that Highchart is providing this with some internal properties and functions but I need to do this through CSS and Dom Manipulation , as well.
Here is a code That I tried to change the color of the Highchart Title:
.highcharts-title{color:red !important;}
but it didn't work!
Thanks
As far as I know, this is the preferred way to do it.
Demo http://jsfiddle.net/o7jrucf6/2/
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
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]
}]
});
Highcharts uses SVG for drawing, so you'll need to use the proper SVG attribute. In your example above it's fill not color:
.highcharts-title{fill:red !important;}
Updated example.
You need to set useHTML flag in title, as true.
title:{
text: 'any',
useHTML: true
}
Related
I would like to click or mouse over on target legend and make it show tooltip like we mouse over on part of the pie chart.
A problem is I have data like this
some data too small and difficult to target by mouse over
PS. I disable clicking the legends to show/hide the data in the chart.
Add the event using jQuery like below...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'pie'
},
legend: {
enabled: true
},
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] ,
showInLegend: true
}]
});
// Apply events to text elements (SVG) and spans within the legend (VML + modern browsers with useHTML option).
$('.highcharts-legend text, .highcharts-legend span').each(function(index, element) {
$(element).hover(function() {
chart.tooltip.refresh(chart.series[0].data[index]);
},function() {
chart.tooltip.hide();
})
});
http://jsfiddle.net/highcharts/5V33F/
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;)
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?
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;
}
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