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?
Related
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
I am using highcharts to create a nice chart. In my case I want to rotate the x-axis labels, but when I do so, the label on the right is not fully visible. Because of that, I want to position the labels more to the left. How can I do this?
I changed an online example so it is easy to play around; http://jsfiddle.net/6hw9tw8q/
Highcharts.chart('container', {
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'December'],
labels: {
rotation: 45
},
},
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]
}]
});
Thanks for your help!
labels: {
rotation: 45,
x:-12
},
You can use x value to change position in x-asix doc.
Here is updated fiddle.
You can add a margin to the right side of the graph, this will mean that the text will not go outside the chart bounds.
Highcharts.chart('container', {
chart: {
marginBottom: 80,
marginRight: 40 //added this line
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'December'],
labels: {
rotation: 45,
},
},
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]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
fiddle: http://jsfiddle.net/6hw9tw8q/3/
API on marginRight: https://api.highcharts.com/highcharts/chart.marginRight
I just found a better solution for my problem. I changed the rotation to minus 45 and this keeps the labels within the window...
http://jsfiddle.net/nxwkLr70/
labels: {
rotation: -45
},
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 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
I would like to apply a font-stretch property to a text in Highcharts.
How can I do this ?
Here is a jsFiddle I've already tried : http://jsfiddle.net/5hPcP/11/
But it does nothing.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events:{
load: function(){
this.renderer.text('Stretched text',60, 60 ).
css({
fontStretch:"extra-expanded",
fontSize : "12pt"
}).attr({
fontStretch:"extra-expanded",
zIndex: 10000
}).add();
}
}
},
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]
}]
});
});
W3C CSS info.
W3C SVG text. Then search for stretch.