I want to use custom legend in chart. So added some css as per requirement to render custom legends. It getting displayed properly on web. But when I try to download it using Print Chart option, it's not displaying custom legend design in downloaded document. In other download options it's working fine except Print Chart. I have tried many solutions but nothing works. Even I have tried with Highcharts jsfiddle example as well with custom legend, it's not working.
Please refer example here. https://jsfiddle.net/DipaliShinde/ep73vqun/1/ (In this example it's not showing css as expected for Series1 legend with background color)
Highcharts.chart('container', {
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
title: {
text: 'Offline export'
},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'right',
useHTML: true,
floating: false,
verticalAlign: 'middle',
x: -40,
y: 10,
//maxHeight: 320,
itemMarginBottom: 20,
labelFormatter: function () {
return '<div><div style="padding-right: 5px;color: #666666;text-align:center;">Text 123<span style="padding-left: 5px;font-size: 12px;font-weight: 300;color: #999999;">(16.78%)</span></div>' +
'<div style="background:' + this.color + ';height:20px; width:120px;text-align:center;color:white;font-weight:300;font-size: 10px;line-height:20px;">'
+ this.name + '</div></div>';
}
},
subtitle: {
text: 'Click the button to download as PNG, JPEG, SVG or PDF'
},
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, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Please guide me to resolve this issue.
Thanks
You can enable experimental allowHTML option, but without online export server it works only for SVG vector image. You can find more information here: https://github.com/highcharts/highcharts/issues/5985
exporting: {
allowHTML: true,
chartOptions: {...},
//fallbackToExportServer: false
}
Live demo: https://jsfiddle.net/BlackLabel/2nvpfgyo/
API Reference: https://api.highcharts.com/highcharts/exporting.allowHTML
With allowHTML, it works for all download option except Print Chart. For Print Chart its not rendering legend same as other download options. Attaching here screenshot.
Print Chart Legend Issue
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'
}]
}};
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>
I'm trying to change the background color of the picture and not the div's background, as follows:
var availability= $("#availability").highcharts();
availability.panes[0].options.background.backgroundColor = "#000000"
but not changing the color in any way, does anyone have any idea what could be wrong?
From the Highcharts API documentation examples, you will define this in the json object that declares your chart object.
$(function () {
$('#container').highcharts({
chart: {
backgroundColor: '#FCFFC5',
type: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'left',
x: 100,
verticalAlign: 'top',
y: 70
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
plotOptions: {
},
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]
}]
});
});
Probably you would want to access this object in memory and change values rather than try to access the DOM object as it will most likely redraw on some event to take its property values from the original JSON object.
Could change the background color of the bow as follows:
$("#availability").find(".highcharts-series path").attr("fill", "#000000");
You can manipulate on SVG element, directly, calling attr() function.
$('#bck').click(function() {
var chart = $('#container-speed').highcharts();
chart.yAxis[0].plotLinesAndBands[0].svgElem.attr({
fill:'red'
});
});
Example: http://jsfiddle.net/snxe1bzk/5/
I am trying to remove the offset on the tick of the x-axis.
I want the first tick 10/8 to start from the x-axis and y-axis intersection.
10-8 should be on the marker which is between the two labels.
I have following code for it in highchart.
xAxis: {
categories: categories,
title: {
text: title_x_axis,
style: {
fontWeight: 'bold'
},
formatter: function(){
return "<h3><b>" + this.value + "</b></h3>";
}
},
min: 0,
startOnTick: true,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
align: "left"
},
Max padding and min padding are set to 0, So I don't know what the problem is?
EDIT:
I have created a fiddle of the type of chart I am dealing with.
Note Image below has different x-axis values as I am not using the same value of fiddle.
Also I have set tickmarkPlacement: "on" after I took that snapshot.
I want Jan label to start from the beginning of line. It has some offset currently.
Can anyone help me with this?
You could use (assuming 'categories' is your array of categories)
min: 0.5,
max: categories.length-1.5,
startOnTick: false,
endOnTick: false,
Example: http://jsfiddle.net/27hg0v06/1/
Use newset version of highcharts to get fully working tooltip:
<script src="http://github.highcharts.com/highcharts.js"></script>
Add pointPlacement: 'on' in plotOptions.
plotOptions: {
series: {
pointPlacement: 'on'
}
}
Take a look at the tickMarkPlacement property:
http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
By default, it is 'between', which is what you are seeing on your chart.
Setting it to 'on' should do what you need.
You can look at the minPadding and maxPadding properties in addition to the tickMarkPlacement:
http://api.highcharts.com/highcharts#xAxis.minPadding
http://api.highcharts.com/highcharts#xAxis.maxPadding
Updated Fiddle:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickInterval: 1,
tickmarkPlacement: "on",
startOnTick: true,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
offset: 0
},
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
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]
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/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="height: 400px"></div>
You Just Need to Add the following before series object:
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
Given the below image - I would like to take the label from the legend for each column and print it on the column itself. I have not been able to find anything in the HighCharts API that will allow me to do this. Does anyone have any ideas or examples of something like this I could look at?
Thank you!
EDIT
There is a better example of what I want to accomplish
I think that is easily discernible. The use case is these stats are displayed on large monitors around a call center. The legend is typically too small to read from any given distance.
Just try formatting the data label on a column chart, here is an example to get you started.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: '#000',
style: {fontWeight: 'bolder'},
formatter: function() {return this.x + ': ' + this.y},
inside: true,
rotation: 270
},
pointPadding: 0.1,
groupPadding: 0
}
},
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]
}]
});
});
Really, what this case calls for, is for this to be a bar instead of a column, and category labels that are not rotated, and are clearly readable.
Example:
http://jsfiddle.net/jlbriggs/yPLVP/23/
You can also offset the axis labels to put category name on the bar itself, but really - it's just not as good a way to display as the above example:
http://jsfiddle.net/jlbriggs/yPLVP/24/
These could both be a column instead of a bar still, of course, but rotating the labels is always a bad idea if it can be avoided.
These methods also allow the data label to still be used as a data label should that ever be required.