I'm trying to allow X axis label overlapping on a column chart in HighCharts but it doesn't seem to 'take'. In the API, it seems to say this should be done as follows:
xAxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December','January2', 'February2', 'March2', 'April2', 'May2', 'June2', 'July2', 'August2', 'September2', 'October2', 'November2', 'December2','January3', 'February3', 'March3', 'April3', 'May3', 'June3', 'July3', 'August3', 'September3', 'October3', 'November3', 'December3'],
labels: {
allowOverlap: true,
}
},
It seems simple enough but it doesn't seem to be working for me. Is this a bug or is there some other setting needed?
https://jsfiddle.net/khfyxLq1/
Thank you!
David
To show all of the categories you need to also set step to 1.
xAxis: {
categories: [...],
labels: {
allowOverlap: true,
step: 1
}
}
Live demo: https://jsfiddle.net/BlackLabel/gc2hetpj/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Related
I would like to have multiple series in my sankey diagram so that the legend adjusts along.
For now, I have to have to trick with an empty data series:
series: [{
name: 'New allocations',
keys: ['from', 'to', 'weight', 'color'],
data: sortedData,
centerInCategory: true,
showInLegend: true,
color: 'pink',
colorByPoint: false,
nodes,
}, {
name: 'Current allocations',
keys: ['from', 'to', 'weight', 'color'],
data: [], // Only added so that it is displayed in the legend :(
centerInCategory: true,
showInLegend: true,
color: 'blue',
colorByPoint: false,
nodes,
}]
But it doesn't feel correct for color handling, nor tooltip content.
Thanks
A possible solution would be to use hide() and show() methods, another thing is to set the color to transparent.
Unfortunately, I don't see an option to not have the whole date in the following series because otherwise the series is added to the whole width of the chart.
var series = chart.series[1];
if (series.visible) {
series.hide();
e.target.innerHTML = 'Show apples';
} else {
series.show();
e.target.innerHTML = 'Hide apples';
}
Demo:
https://jsfiddle.net/BlackLabel/q0L3jdy2/3/
API References:
https://api.highcharts.com/class-reference/Highcharts.Series.html#hide
https://api.highcharts.com/class-reference/Highcharts.Series.html#show
I am trying to create a lollipop chart where some values are negative, and some are positive, either side of zero, like this:
image
However the chart seemingly only allows the marker to be on the "high" end of the chart. Is there a way to control which end has the marker ?
I'm using these chart options:
chartOptions: {
chart: {
type: 'dumbbell',
inverted: true
},
title: {
text: 'lollipop chart'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'value'
}
},
series: [{
name: 'value',
data: [{
name: 'a',
low:0,
high:13,
}, {
name: 'b',
low:0,
high:26,
},{
name: 'c',
low:-43,
high:0
},{
name: 'd',
low:-83,
high:0
},{
name: 'e',
low:0,
high:113
}]
}]
}
The series which should be used in this case is a lollipop, but it seems that the array of objects configuration doesn't work. I reported it on the Highcharts Github issue channel, where you can follow this thread: https://github.com/highcharts/highcharts/issues/13202
As a solution in the dumbell series I suggest to find those graphics in the render callback and hide them.
Demo: https://jsfiddle.net/BlackLabel/3o7acsbt/
events: {
render() {
let chart = this;
chart.series[0].points.forEach(p => {
if (p.low >= 0){
p.lowerGraphic.hide()
} else {
p.upperGraphic.hide()
}
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.render
EDIT
Under the GitHub link, the workaround showed up. Please check it, maybe will be fit better to your requirement.
Show data using highchart bar graph where categories are dynamic date which comes with data.
My code to show data on graph:
function highchartDate(Male,Female) {
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000, // one day
startOnTick: true,
endOnTick: true,
dateTimeLabelFormats: {
day: '%e of %b'
}
},
tooltip: {
shared: true
},
series: [{
name: 'Day Shift',
data: Male
}, {
name: 'Night Shift',
data: Female
}]
});
};
where Male and Female are the array of arrays like
Male = [[1508803200000, 41][1509235200000, 44][1509408000000, 44]]
Female =[[1508803200000, 41][1509235200000, 44][1509408000000, 44]]
when i run this code on fiddle it works fine but not in project I noticed the reason but don't get the way to make it worked in code.
Can any one help me in this getting the data displayed on graph properly.
this is the Link where you get the code which run fine if i put the value in data seperated with commas like [[1508803200000, 41],[1509235200000, 44],[1509408000000, 44]] .this works fine : https://jsfiddle.net/Pookool/k1qua683/1/
#Kamil Kulig can you help me in this or any one else
I made a barchart with dates. Currently, to remove the dates, you must click on the dates in the legend. I wish delete multiple dates at once.
Let's take an example. My dates range from 1960 to 2015. If I would have on my chart the dates from 2000 to 2005, so I would like that if you click on 1960 and 1999, then all the dates between are deleted / hidden. It goes faster when many dates.
How to do ?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
colors:[
'#7cb5ec',
'#434348',
'#90ed7d',
'#f7a35c',
'#8085e9',
'#f15c80',
'#e4d354',
'#2b908f',
'#f45b5b',
'#91e8e1',
'#DA70D6',
'#1E90FF',
'#E0F000'
],
legend:{
itemStyle:{
fontSize:'10px',
font:'10pt',
color:'#000000'
}
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
categories: [
'',
],
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2004',
data: [49.9],
},
{
name: '2005',
data: [83.6]
},
{
name: '2006',
data: [48.9]
},
{
name: '2007',
data: [69.1]
},
{
name: '2008',
data: [83.6]
},
{
name: '2009',
data: [40.9]
},
{
name: '2010',
data: [69.9]
},
{
name: '2011',
data: [83]
},
{
name: '2012',
data: [28.9]
},
{
name: '2013',
data: [40.9]
},
{
name: '2014',
data: [81.6]
},
{
name: '2015',
data: [24.9]
},
{
name: '2016',
data: [46.4]
}]
});
});
Thanks
Rather than having each year as its own series, I would recommend that you place the years as the values in your x-axis (as categories) and then use Highcharts' native zoom function to allow users to select a certain date range.
I've updated your fiddle with some changes, which I explain below: https://jsfiddle.net/brightmatrix/hr28s27L/
First, in your chart option, I added zoomType: 'x' to allow users to use their mouse to zoom in on specific years. The value x means they can only zoom horizontally (across), which makes for a "cleaner" interaction.
chart: {
type: 'column',
zoomType: 'x'
},
Second, I updated your x-axis with the years as the categories/values:
xAxis: {
categories: ['2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
},
Lastly, I updated your series to show just the data points, which are then plotted on the y-axis:
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4]
}]
Here is what happens when a user clicks and drags their mouse cursor:
The shaded box is what they are selecting. Once they release the cursor, the chart will automatically adjust to show only what they chose. A "Reset Zoom" button will appear at the top right to allow them to go back to all years:
Update (July 19, 2016): I did some research on adding a simple slider element to this chart that allows users to choose from a range of years.
An updated version of my fiddle that shows this example chart with sliders can be found here: https://jsfiddle.net/brightmatrix/uvat8u05/.
The code to handle the sliders is shown below. I discovered that explicitly setting the slider values to integers using the parseInt() function solved a couple of problems:
You can correctly compare the slider values to make sure users can't choose an end year that is earlier than the start year.
The setExtremes() function correctly shows a single year when users choose the same start and end year.
All x-axis labels are shown at all times. Before I added parseInt(), some labels disappeared when users chose different values in the sliders.
Please be sure to read the comments I've left in both the HTML and Javascript panes, as I've included additional details on why I made certain code decisions.
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// convert the slider values to integers to make sure setExtremes() works as expected
var slider1Val = parseInt($('input[name="slider1"]').val());
var slider2Val = parseInt($('input[name="slider2"]').val());
if (slider2Val < slider1Val) {
// warn the user if they try to choose an end year that is later than the start year
alert("You can't choose an end year that is earlier than your start year.");
} else {
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes(slider1Val, slider2Val);
}
});
I hope this information is helpful for you.
I am attempting to add a HighCharts chart to my app using the 'rallychart' component. The chart I am looking to recreate can be seen here:
http://jsfiddle.net/sdWr3/
It uses a combination of 'line' and 'columnrange' elements to achieve the desired effect. I can get both types of charts to render separately using the 'rallychart' by setting the configuration as follows:
chartConfig:
chart : {
type : 'line' //Or 'columnrange'
}
}
If I do not specify this setting, and instead specify the chart type in the series object, like I have in the previous example, I get the following error message when trying to render the chart:
I'm not sure if there is an error in my configuration, or if this could perhaps be a problem with the component itself.
I submitted a bug. A simplified code, that does not use a combination of chart types, but only columnrange still returns the same error if type: 'columnrange' is set in the series. It works if it is set
chartConfig: {
chart:{type: 'columnrange'}
}
but that does not help in the case when we want a mixed type chart. When I tested a different type in the series, e.g. column, it worked, which seems to indicate that this issue does not affect all types.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this._makeChart();
},
_makeChart:function(){
var _series = [
{
type : 'columnrange',
name : 'Range',
data : [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
],
pointWidth: 4
}
];
this.add(
{
xtype: 'rallychart',
viewConfig: {
loadMask: false
},
id: 'chart',
chartConfig: {
//chart:{type: 'columnrange'}
chart:{}
},
chartData: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: _series
}
});
}
});
There is another detail. Notice that I set categories inside chartData, and not in xAxis. See in source that chartConfig.xAxis.categories is overwritten:
chartConfig.xAxis.categories = this.chartData.categories;
If it is not defined in chartData, but defined in chartConfig.xAxis, the values in xAxis will have not effect.