I am having trouble using the fillColor property in the highchairs api. Below is my code. I have tried setting the fillColor property with a rgb value and by setting it equal to a color. For example, I tried fillColor: "blue",. No matter what I try I am not getting any fillColor for my line chart. I am able to change the line color and the color of the markers.
<script>
$(function() {
$('#container').highcharts({
credits : {
enabled: false
},
exporting:
{
enabled: false
},
chart: {
type: 'line'
},
title: {
text: "Progress"
},
subtitle: {
text: 'Village Print & Media'
},
xAxis: {
title:{
margin: 50,
text: "February"
},
categories: ["2/3", "2/6", "2/9", "2/12", "2/15", "2/18", "2/21", "2/24", "2/27"]
},
yAxis: {
title: {
text: "Points"
}
},
plotOptions: {
series: {
color: "black",
fillColor: "#00FF00",
fillOpacity: 0.7,
},
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'middle',
borderWidth: 2
},
series: [{
name: 'Points Ray',
data: [5, 10, 15, 17, 25, 30, 34, 35, 50]
}]
});
});
</script>
Related
I have one Highchart which is showing a Standard Deviation curve (Bell curve). I would like to plot a x axis vertical line when x=0.(see my current graph).
When I include the code to include the line the chart disappear, so I believe something I need to change, obviously :-).
Just as information the chart works perfectly without the "plotLines:" inside xAxis.
Could you help me with this?
See my Script
<script>
var data = <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>;
var pointsInInterval = 5;
Highcharts.chart('container', {
chart: {
margin: [50, 0, 50, 50],
events: {
load: function () {
Highcharts.each(this.series[0].data, function (point, i) {
var labels = ['4σ', '3σ', '2σ', 'σ', 'μ', 'σ', '2σ', '3σ', '4σ'];
if (i % pointsInInterval === 0) {
point.update({
color: 'red',
dataLabels: {
enabled: true,
format: labels[Math.floor(i / pointsInInterval)],
overflow: 'none',
crop: false,
y: -2,
style: {
fontSize: '13px'
}
}
});
}
});
}
}
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
],
yAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
}],
series: [{
name: 'Bell curve asd',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
pointsInInterval: pointsInInterval,
intervals: 4,
baseSeries: 1,
zIndex: -1,
marker: {
enabled: true
}
}, {
name: 'Data',
type: 'scatter',
data: data,
visible: false,
marker: {
radius: 1.5
}
}],
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
</script>
Plot lines should be added as a property of an axis object:
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true,
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
}
]
Live demo: http://jsfiddle.net/BlackLabel/4xcno5v9/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines
I have a scatter chart in which there are some points in different series which overlap at exact points.
The x,y for both of these points in different series are same.
So I need to show both of them at the same time in tooltip.
However, the shared option only works when I'm not formatting the tooltip.
It doesn't work when I use pointFormat.
I tried to use formatter, but this just gives current point.
If I switch the chart to line chart, this gives points, which has all the points in the current position. With that, I can iterate and do the formatting.
Chart options:
{
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
borderWidth: 1
}, tooltip: {
formatter: function () {
console.log(this);
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' +
point.point.options.dynamicText;
}, '<b>' + this.x + '</b>');
},
crosshairs:true,
shared: true
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo1"}]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo2"}]
}]
}
https://jsfiddle.net/dushyantbangal/ojqde34x/17/
Shared tooltip does not work with scatter series - please check this issue: https://github.com/highcharts/highcharts/issues/1431
The simplest solution is to use line series type with lineWidth property set to 0:
plotOptions: {
series: {
lineWidth: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/3fda1nm4/
API Reference: https://api.highcharts.com/highcharts/series.line.lineWidth
I'm using angular6 and the office highcharts angular wrapper (https://github.com/highcharts/highcharts-angular) in version 2.4.0.
Everything is working good except the labels that can be placed manually on the chart.
I just don't manage to get them refreshed.
I have a graph that can be filtered through the back-end. When I get the new generated data I update the data in my chartOptions which are used in the html as [options]="chartOptions" for the angular component.
The chartOptions are instanciated from my default class like this: this.chartOptions = new GraphConfigSeqAtteptedVsAchived().chartOptions;
The Class looks like this:
`import * as Highcharts from 'highcharts';
export class GraphConfigSeqAtteptedVsAchived{
public chartOptions: any;
constructor(){
this.chartOptions = {
chart: {
height: 600,
width: 620,
events:{load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
backgroundColor: 'transparent',
},
credits: {
text: 'charname',
href: ''
},
labels: {
},
exporting:{
chartOptions:{
title: {
text:'not set',
style:{
color: '#000000'
},
margin: 0
}
}
},
tooltip: {
enabled: false
},
xAxis: {
min: -10,
max: 0,
width: 535,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
yAxis: {
min: -10,
max: 0,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
title: {
text: ' as',
margin: 0,
style:{
color: 'transparent'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 90,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1,
navigation: {
enabled: false
}
},
plotOptions: {
scatter: {
stickyTracking: false,
allowPointSelect: true,
marker: {
radius: 3,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '',
hideDelay: 500
},
symbol: "circle",
events: {
mouseOut: function() {
this.chart.myTooltip.hide();
this.chart.myTooltip.options.enabled = false;
},
mouseOver: function() {
if(this.halo) {
this.halo.attr({
'class': 'highcharts-tracker'
}).toFront();
}
},
click: function(event) {
this.chart.myTooltip.options.enabled = true;
this.chart.myTooltip.refresh(event.point, event);
}
}
},
line:{
events: {
legendItemClick: function () {
return false;
}
}
},
series:{
allowPointSelect: true
}
},
series: [{
type: 'line',
data: [[30, 30], [-30, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 1
}
},
showInLegend: false,
color: "rgba(0, 0, 0, 0.6)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29.5], [-29.5, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29.5, 30], [-30, -29.5]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29, 30], [-30, -29]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29], [-29, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
}]
}
}
}`
The generated data is in the typescript dynamically added and all of that works just fine. Everything is refreshed after I set the updateFlag for [(update)]="updateGraph". The axis titles are also fine.
The only thing that's not refreshed for me are the labels i dynamically added to the chart like this:
let labelTotalNumberOfEyes = {
html : this.translate.instant('GRAPHS.TOTAL_NUMBER_OF_EYES') + ': ' + (scatterSeries.data.length + scatterSeriesRetreatment.data.length),
style : {
left : '330px',
top : '368px',
fontSize : '14px',
backgroundColor: '#FFFFFF',
borderWidth: 1,
}
}
this.chartOptions.labels.items.push(labelTotalNumberOfEyes);
Does someone have any idea what I'm might doing wrong? I don't see any further option than just setting this update flag and it works fine for everything but the labels.
Please let me know if you're missing any information.
Thanks in advance.
This issue is actually a Highcharts bug. I've reported it here: https://github.com/highcharts/highcharts/issues/10429.
As a workaround, you can use Highcharts.SVGRenderer to add a custom label and store reference to it in your component. Next, when updating, call attr() method on the label (Highcharts.SVGElement) and set new options. Check demo and code posted below.
Add a label on chart callback:
constructor() {
const self = this;
this.chartCallback = chart => {
self.chart = chart;
self.label = chart.renderer
.text("test", 100, 100)
.css({
fill: "#555",
fontSize: 16
})
.add()
.toFront();
};
}
call attr() on the label while updating:
update_chart() {
const self = this,
chart = this.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
self.chartOptions.series = [
{
data: [10, 25, 15],
name: "updatedSerieName"
}
];
self.chartOptions.yAxis.title.text = "updatedData";
self.label
.attr({
text: "test1",
x: 150,
y: 120
})
.css({
fill: "red",
fontSize: 20
});
self.updateFromInput = true;
}, 2000);
}
Demo:
https://codesandbox.io/s/8zo0yvqqwj
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I would like to have something similar to the image below, but the columns representing the classes all stack together now. How do I separate them and allow them to load dynamically as well?
Also I need a legend that says green is band 1, yellow is band 2, orange is band 3 and red is band 4, how do i do that as well? My code is in the JS Fiddle page. I am not allowed to use jQuery, need to use pure JavaScript.
var options = {
chart: {
renderTo : 'container',
type: 'column'
},
title: {
text: 'Topic & Subtopic Mastery'
},
subtitle: {
text: 'Average Level-Stream Mastery vs Average Class Mastery'
},
xAxis: {
categories: topics
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Mastery'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' %'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: resultsData
};
http://jsfiddle.net/kscwx139/2/
I came up with a solution you are looking for with specifying x and y axis data for level and giving appropriate width to the point.
$(function() {
var chart;
$(document).ready(function() {
var i = 0;
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
if (i == 0) {
i++;
return Highcharts.Color(color)
.setOpacity(1)
.get('rgba');
} else {
i++;
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
}
});
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderColor: null
},
title: {
text: 'Mailboxes over Quota'
},
subtitle: {
text: 'Mailbox Size in MB'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ["Overall Topic", "Topic 1", "Topic 2"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Total',
align: 'high'
},
allowDecimals: false,
},
tooltip: {
formatter: function() {
return '' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
name: 'Level',
color: colors[0],
data: [{
y: 86,
x: 0.25
}, {
y: 80,
x: 1.25
}, {
y: 95,
x: 2.25
}],
pointWidth: 80
}, {
name: '4A',
data: [90, 88, 97]
}, {
name: '4B',
data: [95, 78, 92]
}, {
name: '4C',
data: [80, 69, 84]
}]
});
});
});
To show in label inside your column you can use below code.
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name;
},
y: 25,
}
}
}
You can see it in action at this JSFIddle
I'd like to use a background image for each of my pie chart's slices. Is this possible in High Charts? I can't find an option to specify a background image for each slice. Here's a simple fiddle I put together: http://jsfiddle.net/3KyeL/ (just putting this here in case it makes life easier for someone who knows what to do):
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
title: {
align: 'center',
text: 'The Foo Bar',
style: {
color: '#9EA7B6'
},
verticalAlign: 'bottom',
y: 15 // TODO: compute this
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
distance: -100,
enabled: true,
color: '#FFFFFF',
format: '<strong>{point.name}</strong>: {point.percentage:.1f} %'
},
center: ['50%', '50%']
}
},
series: [{
data: [{
name: 'Foo',
y: 25
}, {
name: 'Bar',
y: 50
}, {
name: 'Foobar',
y: 25
}],
type: 'pie'
}]
});
});
Try to use pattern plugin: http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill
For example: http://jsfiddle.net/kVwGn/
<script src="https://rawgithub.com/highslide-software/pattern-fill/master/pattern-fill.js"></script>
...
series: [{
type: 'pie',
data: [{
y: 35,
color: {
pattern: 'http://highcharts.com/demo/gfx/pattern1.png',
width: 6,
height: 6
}
}, {
y: 15,
color: {
pattern: 'http://highcharts.com/demo/gfx/pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
}]