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
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
Consider this jsfiddle
Highcharts.chart('container', {
chart: {
plotBorderWidth: 1,
marginLeft: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Title aligned left',
align: 'left',
x: 70
},
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 want to have a default text in the middle of the chart, if the data is empty.
Is there a way to accomplish that?
There is a specific module for that called no-data-to-display.js and you can customize the text too like that :
Highcharts.setOptions({
lang:{
noData:'Something is missing !' // Your text when there is no data
}
});
Fiddle
You can use the loading option to show some text in middle of the chart when you have no data:
lang:{
loading: 'your text here'
},
Then call showLoading() to show this text when you have no data. Here are the documentation of how to customize the loading text.
Working example:
let my_chart = Highcharts.chart('container', {
chart: {
plotBorderWidth: 1,
marginLeft: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Title aligned left',
align: 'left',
x: 70
},
lang:{
loading: 'your text here'
},
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]
}]
});
if (!my_chart.series[0].data.length)
my_chart.showLoading()
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
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?
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.
I am using one highchart to control another one. After setting the chart.evetns.selection, chart.yAxis.getExtremes can't return correct dataMax if I zoom a tiny region. However, if I click once again, then it return the correct one. Any suggestion to avoid this? here is my code: http://jsfiddle.net/tianhuidong/Jhupu/
$(function () {
$('#container1').highcharts({
chart: {
events: {
selection: function (event) {
m1 = event.xAxis[0].min
m2 = event.xAxis[0].max
var chart1 = $('#container1').highcharts()
var chart2 = $('#container2').highcharts()
chart1.xAxis[0].setExtremes(m1, m2);
chart2.xAxis[0].setExtremes(m1, m2);
},
click: function (event) {
var chart1 = $('#container1').highcharts()
var chart2 = $('#container2').highcharts()
xx = chart1.xAxis[0].getExtremes()
yy = chart1.yAxis[0].getExtremes()
alert(yy.min)
alert(yy.dataMax)
alert(yy.userMax)
alert(Object.keys(yy))
chart1.xAxis[0].setExtremes(xx.dataMin, xx.dataMax);
chart1.yAxis[0].setExtremes(yy.dataMin, yy.dataMax);
chart2.xAxis[0].setExtremes(xx.dataMin, xx.dataMax);
}
},
zoomType: 'xy'
},
tooltip: {
crosshairs: true
},
plotOptions: {
series: {
events: {
legendItemClick: function (event) {
var chart1 = $('#container1').highcharts()
var chart2 = $('#container2').highcharts()
//alert(Object.keys(chart1.series[0]))
chart2.series[0].hide()
//chart2.showResetZoom()
//alert(Object.keys(chart.resetZoomButton))
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 186.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 186.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
$(function () {
$('#container2').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', '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, 116.4, 194.1, 95.6, 54.4, 29.9, 71.5, 186.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
Have you tried set a minRange parameter ? http://api.highcharts.com/highstock#xAxis.minRange