I've tried various ways of updating treemap color axis legend font size and font family
var options = {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
labels: {
style: {
fontSize: '10px',
fontFamily: 'Arial'
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A', value: 6,colorValue: 1 }, { name: 'B',value: 6,colorValue: 2 }, {
name: 'C',value: 4,colorValue: 3}, {name: 'D',value: 3,colorValue: 4 }, {
name: 'E',value: 2,colorValue: 5 }, {name: 'F',value: 2, colorValue: 6}, {
name: 'G',value: 1,colorValue: 7}] }],
title: {
text: 'Highcharts Treemap'
}
};
var chart = Highcharts.chart('container', options);
$('#update').click(function () {
chart.update({
chart:{
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
legend: {
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
colorAxis: {
labels: {
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
}}
});
chart.legend.update({
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
})
});
Please see here - http://jsfiddle.net/hsuh/t04qe2xx/8/
Style doesn't seem to be updated. Please help. Thanks
Your click event is not fired because of the difference in id.
Remove hash from button's id: <button id='update'> Update </button>
Then you can update axis via axis.update()
$('#update').click(function() {
chart.colorAxis[0].update({
labels: {
style: {
fontSize: '20px'
}
}
})
});
example: http://jsfiddle.net/t04qe2xx/9/
Related
I am using ECharts to create a Doughnut chart and I would like to display static text in the center of the chart. However, there is a space between the text and subtext that I am unable to reduce. Can somebody please assist me in resolving this issue? The code is provided below with screenshot.
https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut
option = {
title: {
text: `51`,
subtext: 'INSTANCES',
x: 'center',
y: 'center',
textStyle:{
color: '#111111',
fontFamily: 'Montserrat',
fontWeight: 'bolder',
fontSize: 70,
},
subtextStyle:{
fontSize: 16,
color: '#888888',
}
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{ value: 36, name: 'Standard' },
{ value: 12, name: 'High Memory' },
{ value: 3, name: 'High CPU' },
{ value: 3, name: 'Other' },
]
}
]
};
I do not see in docs any mention how to adjust fontSize of dataLabels.
dataLabels do not have any mention about font size:
dataLabels: {
offset: 0,
minAngleToShowLabel: 10
},
It's not possible?
new Vue({
el: "#app",
data() {
return {
series: [4, 7, 3, 45, 32, 53],
options: {
expandOnClick: true,
dataLabels: {
minAngleToShowLabel: 50,
// offsetY: 1200,
style: { fontSize: '18px' } // this do not work!
},
chart: {
width: 480,
type: 'pie',
},
legend: {
// offsetX: 510,
fontSize: '16px',
height: 500,
width: 400,
horizontalAlign: 'right',
},
title: {
text: 'Some name',
style: {
fontSize: '20px',
},
},
labels: ["aa", "bb", "cc", "dd", "ee", "ff"],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 480
},
legend: {
position: 'right',
offsetY: 40,
fontSize: '16px',
},
}
}]
},
}
},
methods: {
},
components: {
VueApexCharts
}
})
https://jsfiddle.net/ayx8ez9k/
You can find a pretty good summary of your options here on this page: https://apexcharts.com/docs/options/datalabels/
style: {
fontSize: '14px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 'bold',
colors: undefined
},
You can simply provide styling in CSS class.
.apexcharts-pie-label{
font-size:25px;
}
So i have the following configuration:
const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
data: ['Frekvens', 'Vigtighed']
},
xAxis: {
type: 'category',
data: ['marker_01', 'marker_02'],
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
marker_01: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.marker_01
}
},
marker_02: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.maker_02
}
},
}
}
},
yAxis: {},
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: icons.marker_01,
itemStyle: {
normal: {
color: colors[0],
label: {
interval: 5,
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
},
{
name: 'Vigtighed',
type: 'bar',
data: frequencyChartImportance,
itemStyle: {
normal: {
color: colors[1],
label: {
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
}
]
};
Now as you can see i am using two images as my xAxis
Now i wish to make these show up on my tooltip when i hover over the chart. However i am not quite sure how to do that and was hoping some of you might be able to help?
Simply stated, a series may have a tooltip but the tooltip must be listed as an object with an identifying trigger (see tooltip documentation).
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: {
show: true,
trigger: 'axis',
formatter: (params) => {
// see tooltip.formatter for details
// you want to focus on the 'marker' property
return params[0].name;
}
}
}]
With this in mind, you can set two variables and print them as need be within the output of your tooltip. See the additional example below (from CodePen).
var myChart = echarts.init(document.getElementById("main"));
// specify chart configuration item and data
var option = {
title: {
text: "ECharts entry example"
},
tooltip: {
show: true,
trigger: "axis",
backgroundColor: 'rgba(0, 0, 0, 0.8)',
formatter: (params) => {
// create new marker
var icon0 = `<span data-tooltip="minimum" style="border-left: 2px solid #fff;display: inline-block;height: 12px;margin-right: 5px;width: 20px;"><span style="background-color:${params[0].color};display: block;height: 4px;margin-top: 4px;width: 20px;"></span></span>`;
var icon1 = `<span data-tooltip="implied-high" style="background-color:rgba(255,255,255,.75);border-radius: 2px;display: inline-block;height: 12px;margin-right:5px;width: 20px;"><span style="background-color:${params[0].color};border: 1px solid ${params[0].color};border-radius:50%;display:block;height:6px;margin-left:7px;margin-top:3px;width:6px;"></span></span>`;
console.log("params", params, params[0].name);
return `${icon0} ${params[0].name}
${icon1} ${params[0].value}`;
},
textStyle: {
fontWeight: 'bold',
fontSize: 18
}
},
legend: {
data: ["Sales"]
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [
{
name: "Sales",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
Im using highcharts that now we have so much item, i need something to make it readable and scrollable, i have added zoom property but it doesnt meet requiriments, any idea?
this is my code :
Highcharts.theme = {
colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
zoomType: 'x',
backgroundColor: null,
style: {
fontFamily: "Dosis, sans-serif"
}
},
title: {
style: {
fontSize: '16px',
fontWeight: 'bold',
textTransform: 'uppercase'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'rgba(219,219,216,0.8)',
shadow: false
},
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'
}
},
xAxis: {
gridLineWidth: 1,
labels: {
style: {
fontSize: '12px'
}
}
},
yAxis: {
minorTickInterval: 'auto',
title: {
style: {
textTransform: 'uppercase'
}
},
labels: {
style: {
fontSize: '12px'
}
}
},
plotOptions: {
candlestick: {
lineColor: '#404048'
}
},
scrollbar: {
enabled: true
},
// General
background2: '#F0F0EA'
};
i have been added zoomType: 'x' for now, but i need to work with scrollable too. what property i should use? i already try highstock but it doesnt work with drilldown charts.
Use can use scrollablePlotArea property. Also, drilldown works with Highstock: http://jsfiddle.net/BlackLabel/9ap2sj7k/
chart: {
scrollablePlotArea: {
minWidth: 1200
}
}
Live demo: http://jsfiddle.net/BlackLabel/b0f2dq3g/
API: https://api.highcharts.com/highcharts/chart.scrollablePlotArea
I am having a problem, with the categories of two box plots. From the following fiddle: http://jsfiddle.net/Taylby/wxpqsr9b/4/
$(function () {
$('#container').highcharts({
chart: {
type: 'boxplot',
inverted: true
},
title: {
text: 'Medication Prescription between start date and stop date'
},
legend: {
enabled: true
},
xAxis: {
categories: ["Males","Females"],
title: {
text: 'Cohort'
},
max:1
},
yAxis: {
title: {
text: 'Interval between events'
},
plotLines: [{
value: 2413.8,
color: 'gray',
width: 1,
height: 100,
label: {
text: "Males Average",
align: 'center',
style: {
color: 'gray'
}
}},
{
value: 16149.474524390858,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'males +3SDs',
align: 'center',
style: {
color: 'gray'
}
}},
{
value: -11321.87452439086,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'females -3SDs',
align: 'center',
style: {
color: 'gray'
}
}},
{
value: 1706.6,
color: 'gray',
width: 1,
height: 100,
label: {
text: 'C2 +3SDs',
align: 'center',
style: {
color: 'gray'
}
}}
],
},
series: [{
name: "Males",
data: [
[0,21,69,413,11566]
]
}, {
name: "Females",
data:[
[5,22,70,581,7860]
]
}]
});
});
you can see that there are two groups, Males and Females - however the box plot doesn't line up with the label.
Much appreciated for any thoughts.
You should add x index (first param in your data point).
series: [{
name: "Males",
data: [
[0, 0, 21, 69, 413, 11566]
]
}, {
name: "Females",
data: [
[1, 5, 22, 70, 581, 7860]
]
}]
Example: http://jsfiddle.net/wxpqsr9b/5/