I am trying to set the start of drawing column data from a minimum value, but cannot figure out how to do this. That is, that the axis starts with a value of -43, and not with 0 (see screenshots).
what i have
I want to get something like this:
what i want
chart: {
renderTo: 'container',
backgroundColor: 'transparent'
},
tooltip: {
formatter() {
return `${moment(this.x).format('MMM DD')}: ${this.y.toFixed(2)}`;
}
},
plotOptions: {
column: {
pointStart: -50,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
title: {
text: ''
},
yAxis: {
plotLines: [{
zIndex: 1,
color: '#5c5c5c',
value: 0,
width: 3,
}],
title: {
text: ''
}
},
xAxis: {
gridLineWidth : 1,
labels: {
formatter() {
return moment(this.value).format('MMM DD');
}
}
},
legend: {
enabled: false
},
series: [{
data: [...this.monthData.resultByDays.map(res => [res.date, res.result])],
type: 'column'
}]
I think that a good approach will be to use the columnrange series rather than basic column. In the columnrange it is possible to set the range where the point could start from.
Demo: https://jsfiddle.net/BlackLabel/ur6qgnbz/
And the code to hide the '-60' data label:
dataLabels: {
enabled: true,
formatter() {
if(this.y === -60) {
return false
} else {
return this.y
}
}
}
API: https://api.highcharts.com/highcharts/plotOptions.columnrange
I changed the official chart, but the crosshair not my expected.
DEMO : Official synchronized-charts
What I changed :
Add xAxis.categories as my custom xAxis labels
Change series[0].fillOpacity 0.3 to 1
Use my custom json data
CODE :
```javascript
//$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
var json = {
xData: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
datasets: [{
name: "Num of dog",
data: [1,2,3,4,5,1,2,3,4,5],
unit: "dogs",
type: "area",
valueDecimals: 0
},{
name: "Num of cat",
data: [1,2,3,4,5,1,2,3,4,5],
unit: "cats",
type: "area",
valueDecimals: 0
}]
};
//$.each(activity.datasets, function (i, dataset) {
$.each( json.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
//return [activity.xData[j], val];
return [json.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
...,
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
categories: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
//labels: {
//format: '{value} km'
//}
},
...,
series: [{
...,
fillOpacity: 1,
//fillOpacity: 0.3,
...
});
```
DEMO : My synchronized-charts
What I need:
Display crosshair line, like Official synchronized-charts
Don't show circle point, like Official synchronized-charts
Show circle point When mouse hover, like Official synchronized-charts
Crosshair line put to front
Does anyone know to accomplish this?
Thank you!
For Don't show circle point, like Official synchronized-charts. Added
plotOptions: {
series: {
marker: {
enabled: false
}
pointPlacement: 'on'
}
},
For Crosshair line put to front. Updated xAxis
xAxis: {
categories: json.xData,
tickmarkPlacement: 'on',
crosshair: {
width: 2,
zIndex: 3
},
events: {
setExtremes: syncExtremes
},
},
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function(event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function(chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
trigger: 'syncExtremes'
});
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
var json = {
xData: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
datasets: [{
name: "Num of dog",
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5],
unit: "dogs",
type: "area",
valueDecimals: 0
}, {
name: "Num of cat",
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5],
unit: "cats",
type: "area",
valueDecimals: 0
}]
}
//$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function(activity) {
$.each(json.datasets, function(i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function(val, j) {
return [json.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: json.xData,
tickmarkPlacement: 'on',
crosshair: {
width: 2,
zIndex: 3
},
events: {
setExtremes: syncExtremes
},
},
yAxis: {
title: {
text: null
},
zIndex: 1000
},
plotOptions: {
series: {
marker: {
enabled: false
},
pointPlacement: 'on'
}
},
tooltip: {
positioner: function() {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: 10 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 1,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
//});
.chart {
min-width: 320px;
max-width: 800px;
height: 220px;
margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Fiddle demo
I'm looking to correct some y-Axis issues. I'm looking to remove, or edit, the left and right axis-labels and keep the middle one. [the 0 - 2400 label and remove, or edit, the 0-72g and 0-2400m]
In doing so, I also want to keep all the data intact, however not the labels.
here's my JSFiddle. https://jsfiddle.net/codkare17/L7w67znv/5/
function createChart() {
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Highcharts.stockChart('container', {
rangeSelector: {
selected: 4
},
yAxis: [{
labels: {
min: 0,
max: 8000
},
title: {
text: "Price (USD)",
formatter: '${value}'
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}, {}, {}],
plotOptions: {
series: {
showInNavigator: false
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
}
$.getJSON('https://www.coincap.io/history/365day/BTC', function(json) {
console.log(json)
$.each(names, function(i, name) {
seriesOptions.push({
name: name,
data: json[name],
type: name === 'volume' ? 'column' : 'line',
yAxis: i
})
});
createChart()
});`
You can change yAxis' visible property to false: https://jsfiddle.net/kkulig/L7w67znv/6/
I have a area chart build with highcharts, I am trying to reduce some spaces between y axis cell columns means reduce height from 0 to 1 , 1 to 2 etc, but not getting proper result. how to achieve it ?
jQuery(document).ready(function () {
var txt = document.getElementById('hdnYaxis');
var txtFoxXAxis = document.getElementById('hdnXaxis');
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Monthly Status'
},
xAxis: {
categories: $.parseJSON(txtFoxXAxis.value),
labels: {
style: {
color: 'red'
}
},
maxPadding: 0,
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}'
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: $.parseJSON(txt.value)
});
});
set tickPixelInterval in yAxis ,use this:
yAxis: {
tickPixelInterval: 10 // whatever you want
}
Set maxPadding on yAxis as 0.
yAxis:{
maxPadding:0
}
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},