I have a dynamic chart that allows the user to switch between pie, bar and line charts (in the full deployment the user can switch Ajax data as well).
The export to PDf is causing me some issues. I can adjust the font size and style on the pie chart using:
exporting: {
enabled: false,
sourceWidth: 842,
sourceHeight: 595,
chartOptions: {
plotOptions: {
series: {
dataLabels: {
style: {
fontSize: '7px',
lineHeight: '7px'
}
}
}
}
}
}
However, when I export a bar chart, the xAxis font size is still to large.
I tried:
exporting: {
enabled: false,
sourceWidth: 842,
sourceHeight: 595,
chartOptions: {
plotOptions: {
series: {
dataLabels: {
style: {
fontSize: '7px',
lineHeight: '7px'
}
}
}
},
xAxis: [{
labels: {
style: {
fontSize: '7px'
}
}
}]
}
}
Which altered the font size beautifully, unfortunately it removed all my custom xAxis labels and replaced them with numbers.
I have a fiddle https://jsfiddle.net/spencerplanton/dr0au6kg/5/
Which allows you to see the issue.
I apologise in advance for the slightly verbose nature of the example, but it has been lifted from several sources and a much larger dynamic chart application.
Any help formatting the PDF export bar chart axis font size would be greatly appreciated.
Kind regards
The options for arrays are overwritten. You need to set:
exporting: {
...,
chartOptions: {
...,
xAxis: [{
type: 'category',
labels: {
style: {
fontSize: '7px'
}
}
}]
},
}
Live demo: https://jsfiddle.net/BlackLabel/ryn5p20q/
API Reference: https://api.highcharts.com/highcharts/exporting.chartOptions
Related
I would like to hide a pie chart slice on load but cannot figure out how to do so.
I'm not sure it's possible, but it seems like it might be. There is a property "selected", but it does not seem to change when I manually select or unselect a wedge via the legend. I've tried to dispatchAction like this example (example), but haven't had any luck:
I think you are close to the solution... Actually, you should tweak legend.selected.
Take a look at this basic example:
let option = {
legend: {
selected: {
'B': false // <--- HERE
}
},
series: [
{
type: 'pie',
label: {
position: 'inner'
},
data: [
{ value: 10, name: 'A' },
{ value: 20, name: 'B' },
{ value: 15, name: 'C' }
]
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 300px;
height: 300px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
In my react native application I have a Highcharts chart displaying some bar chart info.
I want to display the legend, so people know what the chart is showing, but I want to disable the functionality that hides bars when the legend is touched.
Additionally the bars themselves fade in and out when you press them... I have disabled the 'tooltip' but the fading still happens, how can I stop this?
If I could render to a static image that would be ideal!
just for info the code is
let Highcharts = "Highcharts";
const conf = {
chart: {
type: "column",
animation: false,
marginRight: 10,
dateFormat: "dd/mm/YYYY"
},
title: {
text: "Spread Events"
},
xAxis: {
type: "datetime",
tickPixelInterval: 50
},
yAxis: {
title: {
text: "Spread"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: { enabled: false },
legend: {
enabled: true
},
exporting: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: FieldStore.graphData.slice()
};
To disable hiding series on legend click, return false from legendItemClick event function.
To disable a tooltip and the fading effect on series hover set enableMouseTracking to false. If you want to also turn off the fading effect on legend hover, change opacity in inactive state:
plotOptions: {
series: {
enableMouseTracking: false,
states: {
inactive: {
opacity: 1
}
},
events: {
legendItemClick: function() {
return false;
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/gjkprbto/
API Reference:
https://api.highcharts.com/highcharts/series.bar.enableMouseTracking
https://api.highcharts.com/highcharts/series.bar.events.legendItemClick
https://api.highcharts.com/highcharts/series.bar.states.inactive.opacity
I genere a donut chart using chartjs and clivuejs.
My problem is depending on the chart the external label can be truncate or not.
Using "inspect" chrome mode I tried to amend the width/height of the canvas and of different parent div without.
//../src/DoughnutChart.js
import {
Doughnut,mixins
} from 'vue-chartjs'
export default {
extends: Doughnut,
mixins: [mixins.reactiveProp],
props: ['chartData'],
data() {
return {
options: {
tooltips: {
enabled: true
},
pieceLabel: {
render: 'label',
arc: true,
fontColor: '#000',
position: 'inside'
},
responsive: true,
legend: {
display: false,
position: 'top',
},
scaleLabel : {
display: true
},
maintainAspectRatio: false
}
}
},
mounted() {
this.renderChart(this.chartdata, this.options)
}
}
As you can see on attached file, external labels are not visible at all or truncate.
EDIT:
Using padding advise provided by Daniel (thanks Daniel)I have now the following. Event if the chart is very small I still have the issue. Is there any way to force the label to have a smarter position based on parent canvas ?
I have a Rally SDK 2.0p5 app that displays a chart. When the user selects an option, the data will be updated and I would like to refresh the chart. But instead of redrawing, it will place a new chart beneath. What is the proper syntax?
// Configure and Add the chart
this.add(
{
xtype: 'rallychart',
height: 400,
id: 'chart',
chartConfig: {
chart: {
},
title: {
text: 'My Chart',
align: 'center'
},
xAxis: [
{
categories: ['M0','M1','M2','M3','M4','M5'],
title: {
text: 'Interval'
}
}
],
yAxis: {
title: {
text: yText
}
},
series: [ { type: 'column',
name: yText,
data: mCount } ],
plotOptions : {
column: {
color: '#F00'
},
series : {
animation : {
duration : 2000,
easing : 'swing'
}
}
}
}
}
);
You need to remove the 1st chart before adding the new one.
redrawChart: function() {
this.remove('#chart');
this.add({...});
}
It's often better to just update the chart in place. HighCharts is the charting library that's included in the App SDK. HighCharts will even animate your changes. Cool!!! Look here for the list of methods that operate on charts. You can add series, change data, change axis limits, control the zoom, etc.
I'm playing with Sencha Touch Charts. I've got them working, with interactions, animation everything is good. I even styled a bunch of them.
But when I got around styling a series of type area.. it just wouldn't take.
new Ext.chart.Chart({
theme: 'MyTheme',
cls: 'myClass',
legend: { ... },
interactions: [{ ... }],
store: app.stores.MyStore,
axes: [...],
series: [{ type: 'area', axis: 'left', xField: 'Date', yField: 'someField' },
{ type: 'line', axis: 'right', xField: 'Date', yField: 'someField2' }
]
})
and the style
chart[cls=myClass] {
series {
&[type=area] {
fill: #FFA500;
}
&[type=line] {
stroke: #008000;
fill: #008000;
marker {
stroke: #008000;
fill: #008000;
}
}
}
}
so the line series is styled just fine, but the area is not :| Any idea?
I've not actually tried this but it looks like you're almost there...
Based on the example found at http://docs.sencha.com/touch-charts/1-0/#!/guide/touch_charts_styling (at "axis" -> "label")
I'd try:
axis[position=bottom] {
label {
rotate: 0 0 45;
}
}