Related
Here is a bar chart showing dates. I'm trying to stylize it and to save space (but also because it is useless).
Do you know how we remove the green square and the text "data by year" please?
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
colors:[
'#d8d826'
],
legend:{
itemStyle:{
fontSize:'10px',
font:'10pt',
color:'#000000'
}
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
// NOTE: There is an interesting bug here where not all labels will be shown when the chart is redrawn.
// I'm not certain why this is occuring, and I've tried different methods to no avail. I'll check with Highcharts.
categories: ['1960','1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'],
tickmarkPlacement: 'on', tickInterval: 1,
minRange: 1 // set this to allow up to one year to be viewed
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
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,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,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,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,49.9,83.6,48.9,69.1,50]
}]
});
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes($('input[name="slider1"]').val(), $('input[name="slider2"]').val());
});
});
You can see the result in https://jsfiddle.net/uvat8u05/9/
Thank you !
You can disable the legend:
legend:{
enabled: false
},
Updated fiddle:
https://jsfiddle.net/uvat8u05/12/
I'm using highcharts.js to build a bar plot. I cannot figure out how to remove the x-axis labels? I know I have to alter the xAxis object but I've tried all the options below and nothing has worked for me. I know this is possible but I'm missing something. Any help is greatly appreciated. Here is the fiddle with the plot I started with fiddle.
xAxis: {
categories: [''],
title: {
text: null
},
labels: {
enabled:false
}
}
xAxis: {
labels: {
enabled:false
}
}
data object, only a sample size..
var obj = {
"data": [0.397851,1721745],
"color":'rgb(51, 204, 51)',
"organism_labels":"klebsiella_oxytoca"
},{
"data": [0.609935,66529],
"color":'rgb(51, 204, 51)',
"organism_labels":"staphylococcus_aureus"
},{
"data": [0.505084,45563],
"color":'rgb(51, 204, 51)',
"organism_labels":"legionella_longbeachae"
},{
"data": [0.669884,83471],
"color":'rgba(223, 83, 83, .5)',
"organism_labels":"enterobacter_aerogenes"
}, {
"data": [0.688673,1309077],
"color":'rgba(223, 83, 83, .5)',
"organism_labels":"pseudomonas_aeruginosa"
}
HighCharts.js
/** Histogram **/
$(function () {
$('#histogram').highcharts({
chart: {
type: 'column',
zoomType: 'xy'
},
title: {
text: 'Histogram'
},
subtitle: {
text: 'Please Help!'
},
xAxis: {
min:0,
max:1,
minPadding: 0,
maxPadding: 0
},
yAxis: {
title: {
text: 'Reads'
}
},
credits: {
enabled: false
},
series:
obj
});
});
Current Plot:
From your screenshot, it looks like what you want to remove is the legend, not the x-axis labels.
Since each of the items in your obj JSON array have their own unique names, the legend will push out each of them unless you set legend: { enabled: false } in your chart options (see http://api.highcharts.com/highcharts#legend.enabled).
Please let me know if that answers your question.
You can try check out the property visible.
xAxis :{
visible : false
}
Whether axis, including axis title, line, ticks and labels, should be visible. Defaults to true.
I am trying to create a mixed chart with the angular plugin instead of plain javascript. For that, I am using this library http://jtblin.github.io/angular-chart.js/
In plain javascript it is created with something similar to this:
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
},
{
label: "Sales",
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
}
]
},
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
}
}
],
yAxes: [
{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show: true,
}
},
{
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
display: false
},
labels: {
show:true,
}
}
]
}
}
});
It can be seen here: http://plnkr.co/edit/TvY5tz?p=preview
I have tried tons of ways to do the same thing with angular-chart but I have been unable to do so. Has anyone been able to create any mixed chart type with the library? If so, please share any example.
Thanks in advance.
Not possible right now, there is an open issue to track this: https://github.com/jtblin/angular-chart.js/issues/336
It is now possible with 1.0.0-alpha8, See here on github
I have a written a stats chart using highchairs.com for the daily visits and installs. I want to show the tooltip with Datetime and Names with total values for each series when hover or on click event.
Highcharts tooltip shared Data shared output is displaying with names but not the date and time correctly when you mouseover on the markers.
What I'm doing wrong?
The code I have written is on jsfiddle as well.
$(function () {
$('#campaign-container').highcharts({
chart: {
type: 'areaspline',
},
title: {
text: null
},
credits: {
enabled: false,
},
navigation: {
buttonOptions: {
enabled: false
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day:"%b %e, %Y",
},
tickInterval: 2,
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
min: 0,
max: 3000,
tickInterval: 1000,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalAlign: 'bottom',
layout: 'horizontal',
x: 0,
y: 0
},
plotOptions: {
areaspline: {
lineWidth: null,
marker: {
enabled: false,
radius: 5
}
}
},
series: [{
name: 'Visits',
color: '#d3d3d3',
data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}, {
name: 'Installs',
color: '#e77378',
data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}]
});
});
You need to provide either:
1) a pointStart and pointInterval property, on the series level (either in the plotOptions, or in the series object)
2) datetime values in the x values of your data
The datetime values can either by epoch time stamps (in milliseconds), or Date.UTC() objects.
The pointInverval, if used, must be in milliseconds.
Example using the pointStart and pointInterval properties:
http://jsfiddle.net/jlbriggs/7yrnreLx/3/
I have updated the code with the correct date time values and added the customised crosshair.
Here is the final code with a correct data values
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: null
},
credits: {
enabled: false,
},
navigation: {
buttonOptions: {
enabled: false
}
},
xAxis: {
type: 'datetime',
tickInterval: 2,
dateTimeLabelFormats: {
day:"%e",
},
crosshair: {
color:'#e77378',
zIndex: 2,
width: 3,
}
},
yAxis: {
min: 0,
max: 3000,
tickInterval: 1000,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalAlign: 'bottom',
layout: 'horizontal',
x: 0,
y: 0
},
plotOptions: {
series: {
cursor: 'pointer',
pointStart: Date.UTC(2016,0,1),
pointInterval: 86400000, //1 day
},
},
areaspline: {
lineWidth: null,
marker: {
enabled: false,
lineColor:'#e77378',
fillColor:'#ffffff',
lineWidth: 3,
radius: 4,
symbol:'circle'
}
}
},
series: [{
name: 'Visits',
color: '#d3d3d3',
data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}, {
name: 'Installs',
color: '#e77378',
data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}]
});
});
I am creating a highchart scatter plot with epoch DateTime values on X-Axis and a float value on Y-Axis. The problem is when I use label formatter to convert the epoch time value to a readable time value ("DD-MMM-YYYY"), multiple labels with the same caption are created on X-Axis, and the points do not align vertically with the tick marks on the X-axis.
I have created a JSFiddle for it (Link). What can I do to resolve this problem...
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Errors'
},
subtitle: {
text: 'Source: Temp Data'
},
xAxis: {
allowDecimals: false,
title: {
text: 'days',
scalable: false
},
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%d-%b-%y', moment.unix(this.value));
}
},
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{"name":"Positive Influencer","data":[[1448994600,41.40329],[1448994600,20.19966],[1449081000,32.26196],[1449167400,45.44334],[1449167400,43.79153],[1449167400,41.07479],[1449167400,24.75943],[1449167400,59.41171],[1449167400,62.26523],[1449167400,43.51655],[1449167400,41.14505],[1449253800,49.21474],[1449253800,41.14505],[1449253800,41.14505],[1449253800,59.45902],[1449340200,29.63791],[1449340200,31.5257],[1449426600,12.77947],[1449426600,16.81416],[1449426600,17.47938]],"color":"#A9D18E"},{"name":"Negative Influencer","data":[[1448908200,21.79101],[1448908200,21.79101],[1448908200,21.79101],[1448908200,17.06943],[1448908200,33.64876],[1448908200,11.28691],[1448908200,18.40087],[1448908200,16.87335],[1448908200,50.01515],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,35.88634],[1448908200,20.16196],[1448908200,34.89129],[1448908200,12.91103],[1448908200,12.91103],[1448908200,12.91103],[1448908200,20.16196],[1448908200,24.0311],[1448994600,26.38517],[1448994600,11.80575],[1448994600,10],[1448994600,20.07552],[1448994600,32.33444],[1448994600,32.33444],[1448994600,20.16196],[1448994600,24.24678],[1448994600,26.86968],[1448994600,26.86968],[1449081000,16.27982],[1449081000,13.02332],[1449081000,25.71094],[1449081000,20.14183],[1449081000,11.01994],[1449081000,27.91542],[1449081000,27.91542],[1449081000,15.11342],[1449167400,29.38302],[1449167400,42.58746],[1449167400,13.3506],[1449167400,57.63139],[1449167400,46.52709],[1449167400,46.52709],[1449167400,27.91542],[1449167400,22.57789],[1449167400,20.14183],[1449167400,30.69887],[1449167400,18.12275],[1449167400,30.19594],[1449167400,30.19594],[1449253800,46.52709],[1449253800,13.3506],[1449253800,30.69887],[1449253800,12.30569],[1449253800,12.30569],[1449253800,11.81466],[1449253800,13.9246],[1449253800,11.80575],[1449253800,11.80575],[1449253800,18.12275],[1449253800,18.12275],[1449253800,27.91542],[1449253800,16.27982],[1449253800,16.27982],[1449253800,16.27982],[1449253800,16.27982],[1449253800,47.37541],[1449253800,16.27982],[1449253800,64.55871],[1449253800,42.33084],[1449253800,16.27982],[1449253800,22.57789],[1449253800,22.57789],[1449253800,16.27982],[1449253800,16.27982],[1449253800,50.01515],[1449253800,22.57789],[1449253800,12.91103],[1449253800,18.12275],[1449253800,81.70462],[1449253800,21.86977],[1449253800,22.57789],[1449253800,42.14268],[1449253800,21.1656],[1449253800,44.74439],[1449253800,30.48095],[1449253800,17.63912],[1449253800,42.34763],[1449253800,23.14725],[1449253800,28.20117],[1449340200,22.57789],[1449340200,24.12882],[1449340200,20.14183],[1449340200,22.57789],[1449340200,18.81954],[1449426600,24.12882],[1449426600,15.08914],[1449426600,21.53001],[1449426600,15.08914],[1449426600,15.08914],[1449426600,14.8175],[1449426600,15.08914],[1449426600,23.64472],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,30.59185],[1449426600,30.59185],[1449426600,30.59185],[1449426600,23.64472],[1449426600,18.12275],[1449426600,18.12275],[1449426600,19.01658],[1449426600,10],[1449426600,10],[
1449426600,10]],"color":"#FF5252"}]
});
});
TL:DR
Make your x axis tick marks fall at midnight with tickInterval: (24 * 3600 * 1000)
Detailed answer
You said that you saw "multiple labels with same caption are created on X Axis". However when I view your fiddle in a recent version of Google Chrome, the x axis looks clean, though the tickmarks don't align perfectly with the days:
I suggest you try different browsers to see if your issue is caused by a particular browser version.
You said in your comment that if you maximize the chart in a larger window, some of the date labels are repeated.
I suggest you make a simpler plot to try to nail down your issue(s).
Update
If you change your formatter function to include the time as well as the date:
Highcharts.dateFormat('%d-%b-%y %H:%M', moment.unix(this.value))
each tickmark will have a different label, even if they fall on the same day:
Alternatively, customize the layout of the tick marks so that they always fall on midnight.
Update 2
I made a simplified demo to show tick marks and data both aligned with midnight. The important features are:
tickInterval: (24 * 3600 * 1000) // the number of milliseconds in a day.
and:
[Date.UTC(2015, 11, 01), 75], // pure JavaScript to return a unix time (in milliseconds since unix epoch) of midnight on the 1st of December
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Datetime scatter plot demo'
},
subtitle: {
text: 'for Stack Overflow'
},
xAxis: {
tickInterval: (24 * 3600 * 1000), // the number of milliseconds in a day
allowDecimals: false,
title: {
text: 'Date',
scalable: false
},
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%d-%b-%y', (this.value));
}
}
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
"name": "Demo values",
"data": [
[Date.UTC(2015, 11, 01), 75],
[Date.UTC(2015, 11, 02), 70],
[Date.UTC(2015, 11, 02), 80],
[Date.UTC(2015, 11, 02), 45],
[Date.UTC(2015, 11, 03), 65],
[Date.UTC(2015, 11, 03), 40],
[Date.UTC(2015, 11, 05), 75]
]
}],
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>