I can't get the subtitle for my pie chart to work. It just won't show.
I was trying this: https://www.highcharts.com/docs/chart-concepts/title-and-subtitle
options: {
pieceLabel: {
showZero: true,
fontColor: '#fff',
fontFamily: "'Maven Pro', sans-serif",
position: 'default'
},
title: {
display: true,
position: 'top',
text: 'Screened',
fontSize: 14
},
subtitle:{
text: 'Subtitle',
},
legend: {
display: false
}
}
My chart displays fine, so I have only shared the options part of the code.
I'm not sure if subtitles are supported by chart.js. If not, suggestions for line break in title or any other substitute are welcome.
In the title text property, you can pass in a string array and each item will break onto a new line.
text: ['Title','Subtitle'],
Here is a working example.
Check if you have registered the SubTitle class to ChartJS
ChartJS.register(
Title,
SubTitle,
);
For anyone still interested in this I've made a simple subtitle plugin:
https://www.npmjs.com/package/chartjs-subtitle
https://github.com/jeredmasters/chartjs-subtitle
This lets you have different styling compared to the primary title
Try this example:
Highcharts.chart('container', {
chart: {
marginTop: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
subtitle: {
text: 'This text has <b>bold</b>, <i>italic</i>, <span style="color: red">coloured</span>, linked and <br/>line-broken text.'
},
series: [{
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Related
I am trying to make a chart where the plotline is by default white in color.
Now, when changing the theme of the page, I want to change the plotline color from whtie to black for light theme. Here is my code:
Highcharts.chart('container', {
chart: {
backgroundColor: '#000',
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
color: '#FFF',
width: 2,
value: 5.5,
dashStyle: 'dash'
}]
},
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]
}]
});
on the image the plotline is white, but I want it to be black only when changing the light theme.
Suggestion please, thanks in advance.
In Highcharts we've got something that is called themes. We've got plenty of them and you can find them here: https://github.com/highcharts/highcharts/tree/master/ts/masters/themes
I also suggest reading about creating your own theme, which is something that I believe you're looking for: https://www.highcharts.com/docs/chart-design-and-style/themes#creating-your-own-theme
Demo of creating a theme that is similar to the one from your image: https://jsfiddle.net/BlackLabel/g05sancb/
Highcharts.theme = {
chart: {
backgroundColor: '#000'
},
xAxis: {
plotLines: [{
color: '#FFF',
width: 2,
value: 5.5,
dashStyle: 'dash'
}]
}};
Area in highcharts highlights the bottom area by default.
I want to highlight the top area.
Is there a recommended way to do that?
Based on this demo, I can change the threshold to 250 to get similar result (as shown in My Expectation)
The only solution I can come up with is:
find out the max y of all data points.
let MAX = k * y_max. (k is a custom-defined factor, say, 1.2; to get better result, y_min is also needed to get a proper k dynamically)
Use the following configuration.
yAxis: {
max: MAX
},
plotOptions: {
series: {
threshold: MAX
}
}
But this requires some js computation and I wonder if highcharts supports this itself.
UPDATE:
I think I'd better state my original question here. I want to support 3 types of areas:
Within Upperbound and Lowerbound
Below lower bound
Above upper bound
I implemented the first one with arearange. But arearange doesn't support missing upper/lower bound; it will remove the thresholds altogether if one bound is missing.
Is there a way to avoid computing the threshold setting by myself?
Using CSS you can obtain something similar to your picture:
Highcharts.chart('container', {
chart: {
type: 'area'
},
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],
color: '#ff0000',
fillColor: '#ffffff',
fillOpacity: 1
}]
});
.highcharts-plot-background {
fill:rgba(255,0,0,0.5);
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
or almost identical using threshold together with negativeColor:
Highcharts.chart('container2', {
chart: {
type: 'area'
},
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],
color: "#FF0000",
fillColor: '#f00000',
fillOpacity: 0.5,
threshold: 300,
negativeColor: '#f00000',
negativeFillColor: 'rgba(255,0,0,0.5)'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container2" style="height: 400px"></div>
Here is a fiddle: http://jsfiddle.net/beaver71/0sameLb6/
Thanks #TorsteinHonsi.
I posted a issue, and #TorsteinHonsi responded quickly and commited a change. area will support -Infinity/Infinity shortly.
I'd like the yAxis labels not to overflow, and also not to overlay on top of the plotted chart. As you can see from the example, they do:
Highcharts.chart('container', {
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: ''
},
opposite: true,
labels: {
align: 'right'
}
},
series: [{
data: [209.9, 71.5, 106.4, 1209.2, 1404.0, 1706.0, 135.6, 1408.5, 216.4, 194.1, 95.6, 54.4]
}]
});
http://jsfiddle.net/uo6shmuL/
I've tried different positioning but I can't see to figure it out without manually setting offsets and padding, which doesn't work because my data is dynamic. How do I get this similar highstocks example to work, where the yAxis is outside of the chart, but nothing is overflowing outside the div?
What I need:
http://jsfiddle.net/P8hrN/1/
labels: {
align: 'left'
}
Using highcharts label formatter
http://api.highcharts.com/highcharts#yAxis.labels.formatter
I'm using the code below to customize the first label, and return the values for all others. Is this how I should use return twice within the formatter? While it works i'm just checking that there isn't a better way to write the function. I'm a little new to js and wondering if the returned data could be combined some how?
Thanks
jsfiddle here
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
labels: {
//align: 'left',
//x: 0,
//y: -2,
useHTML: true,
formatter:function(){
if(this.isFirst){
return 'test';
}
return this.value;
}
}
},
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 have been able to change the color of point in a graph dynamically, but when I hover over that point then the color of that point is changing to previous color.
I have a fiddle here: jfiddle
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
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]
}]
});
// the button handler
$('#button').click(function() {
chart.series[0].data[2].graphic.attr({ fill: '#FF0000' });
chart.redraw();
});
How can I change the color of the point dynamically in a graph?
I think you are looking to update the marker color dynamically.
you can use update functionality for this
chart.series[0].data[0].update();
Here is a jsFiddle for your reference. I hope this will be useful for you.
is this what you are looking for?
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-select-fillcolor/
plotOptions: {
series: {
allowPointSelect: true,
marker: {
states: {
select: {
fillColor: 'red',
lineWidth: 0
}
}
}
}
}