Highcharts: Individually Set Axis Category Style - javascript

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?

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;)

Add plotLine in chartist.js

I am looking for best practice of implementing a plotLine as done in HighCharts using Chartist.js.
The Highcharts example is http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/plotlines-color/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5
}]
},
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 don't see such option in the documentation, so is custom svg element (path/line) the right direction?

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 contextButton color

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;
}

Categories