I'm using Highcharts to develop a customized chart. Here is what I've gotten by my own jsfiddle.
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
type: 'area',
inverted: true,
height: 700,
width: 780,
marginRight: 20
},
credits: {
enabled: false
},
colors: [
'#828385',
'#3AAFC1',
'#F87D2A',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'],
exporting: {
enabled: false
},
title: {
text: ' '
},
subtitle: {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
},
legend: {
itemDistance: 30,
x: 180,
verticalAlign: 'top'
},
xAxis: {
categories: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9", "Label10"],
offset: -410,
labels: {
overflow: 'justify'
},
plotLines: [{
color: '#A0A0A0',
width: 1,
value: 0
}, {
color: '#A0A0A0',
width: 1,
value: 1
}, {
color: '#A0A0A0',
width: 1,
value: 2
}, {
color: '#A0A0A0',
width: 1,
value: 3
}, {
color: '#A0A0A0',
width: 1,
value: 4
}, {
color: '#A0A0A0',
width: 1,
value: 5
}, {
color: '#A0A0A0',
width: 1,
value: 5
}, {
color: '#A0A0A0',
width: 1,
value: 6
}, {
color: '#A0A0A0',
width: 1,
value: 7
}, {
color: '#A0A0A0',
width: 1,
value: 8
}, {
color: '#A0A0A0',
width: 1,
value: 9
}]
},
yAxis: {
title: {
text: 'Índice teste'
},
max: 100,
min: 0,
},
plotOptions: {
area: {
fillOpacity: 0.5
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
if (jQuery('#type_group_name_hidden').val() == 'Processo') {
jQuery('#type_group_name_hidden').val('Atividade');
} else if (jQuery('#type_group_name_hidden').val() == 'Atividade') {
jQuery('#type_group_name_hidden').val('Procedimento');
} else if (jQuery('#type_group_name_hidden').val() == 'Procedimento') {
jQuery('#type_group_name_hidden').val('Processo');
}
jQuery('#group_name_hidden').val(this.category);
requestAjaxChart('processos', buildProcessos);
}
}
},
marker: {
lineWidth: 1
},
threshold: 50
}
},
series: [{
name: "Market",
data: [46.503590664272934, 51.39078282828278, 56.89226932668327, 47.66801075268824, 46.82561768530563, 59.23058676654176, 51.08220338983055, 46.17849829351536, 55.84550063371354, 51.428756058158314]
}, {
name: "My network",
data: [48.175, 27.159999999999997, 39.916666666666664, 38.6, 53.85, 38.949999999999996, 30.4, 51.9, 33.519999999999996, 54.7875]
}, {
name: "Avg",
data: [70, 80, 65, 75, 85, 82, 72, 69, 71, 58]
}]
});
});
Even it looks pretty good, it's not exactly what the client desire. I need to do some changes as described bellow:
Remove all the vertical lines on xAxis. As my chart is a inverted one, I couldn't figure out how to remove them.
On the xAxis values (0 - 100), remove the intermediaries values (10, 20, 30, ...) keeping just the first and last value (0, 100)
Move the yAxis labels upon the horizontal lines
Make clickable the points behind the overflowed chart area
I've tried almost all configuration options but with no success.
Any suggestion?
Some answers :
1) See from docs gridlineWidth property.
2) See from docs tickPositions property.
3) Another docs labels.y property.
4) Not possible, even if it's SVG/VML it still is HTML, you can't make clickable DIV which is positioned behind another one.
Related
The 3 labels that I have on the horizontal stacked bar, the data flow for label 1 is different than label 2 and 3. Compare to label 2 and 3, label 1 colors flow is different.
When I hover over label 1 bars, I see correct title getting displayed in the tooltip that matches with the legend at the bottom:
However, when I hover the bar for label 2 and 3, which in this dark red, I still see "Strongly Agree" showing up in the tooltip, whereas it should have been "Strongly Disagree" if go by the legends at the bottom:
Is this something that is managable to fix it in higcharts? If so, can someone please help me how I would fix the tooltip title for label 2 and 3?
https://jsfiddle.net/samwhite/a4wtr0zb/
let chart = Highcharts.chart('container1_1', {
chart: {
type: 'bar',
height: 300
},
credits: {
enabled: false
},
yAxis: {
title: { text: 'Response Rate' },
max: 100,
maxPadding: 0,
labels: {
format: '{value}%'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
tooltip: {
formatter: function () {
return '<b>'+ tooltip_titles[0][this.series.index] + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
}
},
plotOptions: {
series: {
stacking: 'percent',
pointWidth: 20,
borderWidth: 0,
},
bar: {
states: {
inactive: {
enabled: true
},
hover: {
opacity: .9
}
}
}
},
legend: {
reversed: true,
align: 'right'
},
title: {
align: 'left',
text: 'Progress on Diversity, Inclusion, and Opportunity in our Workplace',
style: {
fontSize: '20px',
fontWeight: 'bold',
}
},
xAxis: {
categories: labels,
labels: {
style: {
fontSize: '1em',
color: '#000',
width: 370,
float: 'left'
}
}
},
series: [{
name: 'Strongly Agree',
color: colors[4],
data: []
}, {
name: 'Agree',
color: colors[3],
data: []
}, {
name: 'Neither Agree nor Disagree',
color: colors[2],
data: []
}, {
name: 'Disagree',
color: colors[1],
data: []
}, {
name: 'Strongly Disagree',
color: colors[0],
data: []
}]
});
I made 2 changes to the fiddle
Change tooltip
Change to show the series name instead of referencing a list
formatter: function () {
return '<b>'+ this.series.name + '</b><br/>' + 'Response Rate: ' + (100*this.point.y).toFixed(2) + '\%';
}
Change setData()
Remove all the "colors" from setData to ensure consistency across categories.
series.setData([
{
name: tooltip_titles[s],
//color: colors[s],
y: dept_data["102"][4-s]
},
{
name: tooltip_titles[s],
// color: colors[Math.abs(s - 4)],
y: dept_data["104"][4-s]
},
{
name: tooltip_titles[s],
// color: colors[Math.abs(s - 4)],
y: dept_data["105"][4-s]
}]);
Here's the result:
For the first one:
For the second one:
The updated fiddle is here:
The yAxis values min and max are set to 0 and 100 with a tick interval of 20 by me.
But when the resolution is changed to a lower resolution or the chart is zoomed in,
I have observed that the height of the high hart decreases and the max value is set to 120 and tick interval to 40 on its own
Which is not the desired behavior can you please help me out how to avoid it?
How can i make sure the max is 100 with a tickinterval 20 in all chart heights and also in turn in lower resolution.
Thanks in advance
Note:- I believe the height is decreased because the xAxis labels rotate diagonally as the width is decreased (in lower resolution) and that occupies more space in the HTML div and causes the height of the chart to decrease.
YAxis with expected behaviour
YAxis in lower resolution with decreased height
https://jsfiddle.net/BlackLabel/drgkt598/
Highcharts.chart('container', {
chart: {
type: "column",
height: 205,
plotBackgroundColor: "#D3D3D3",
width: 250,
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: false
},
pointPadding: 0
}
},
xAxis: {
lineWidth: 2,
type: 'category',
lineColor: '#000',
tickLength: 0
},
yAxis: [{
title: {
text: ''
},
min: 0,
max: 100,
tickInterval: 10,
gridLineWidth: 0,
plotLines: [{
value: 70,
color: 'black',
dashStyle: "Solid",
width: 4,
zIndex: 5,
label: {
text: 39,
align: "right",
x: 2,
y: -5,
style: {
color: 'black',
fontWeight: "bold",
fontSize: "18px",
}
}
}],
}, {
linkedTo: 0,
width: 60,
labels: {
enabled: false
},
plotBands: [{
color: 'rgb(204,0,0)',
from: 0,
to: 30.99,
zIndex: 1,
},
{
color: 'rgb(226,113,113)',
from: 31,
to: 44.99,
zIndex: 3,
},
{
color: 'rgb(247,209,34)',
from: 45,
to: 54.99,
zIndex: 3,
},
{
color: 'rgb(136,207,136)',
from: 55,
to: 68.99,
zIndex: 3,
},
{
color: 'rgb(68,180,68)',
from: 69,
to: 87.99,
zIndex: 3,
},
{
color: 'rgb(0,153,0)',
from: 88,
to: 100,
zIndex: 3,
}
]
}],
series: [{
dataLabels: {
color: "white",
verticalAlign: "bottom",
crop: false,
style: {
fontWeight: "Normal"
}
},
data: [{
y: 85,
name: 'A',
color: 'red',
dataLabels: {
formatter() {
return '<span style="font-size:11px;">A</span>';
},
y: -20
}
}, {
y: 72,
name: 'B',
color: 'green',
dataLabels: {
formatter() {
return '<span style="font-size:11px;">B</span>';
},
y: -15
}
}, {
y: 83,
name: 'C',
color: 'blue',
dataLabels: {
formatter() {
return '<span style="font-size:11px;">C</span>';
},
y: -15
}
}],
showInLegend: false
}]
});
Just like you have noted - there is not enough space to render 5 labels for some smaller dimensions, so implemented logic tries to calculate other timestamps, which will fit, like [0, 40, 80, 120].
I think that you can control it by using the responsive options and set the tickInterval to another value like 50.
Demo: https://jsfiddle.net/BlackLabel/zupbe174/
responsive: {
rules: [{
condition: {
maxHeight: 120
},
chartOptions: {
yAxis: [{
tickInterval: 50
}, {
}]
}
}]
}
API: https://api.highcharts.com/highcharts/responsive.rules.condition
The plotline should spread across the graph but the plot band should of smaller width.
1) Initially without width being set.
2) When y axis width is set to 20
3) I want something like this where both the plot band and the plotline co exists
this is the fiddle code link to what I have tried so far.
Can someone please help me out thank you very much in advance.
https://jsfiddle.net/mncfy80p/
chart: {
type: "column",
height: 205,
plotBackgroundColor: "#D3D3D3",
width:250,
},
title : {
text:''
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: true
},
pointPadding: 0
}
},
xAxis: {
visible:false,
},
yAxis: {
title: {
text: ''
},
min : 0,
max : 100,
tickInterval : 10,
gridLineWidth: 0,
plotLines: [{
value: 70,
color: 'black',
dashStyle: "Solid",
width: 4,
zIndex: 5,
label: {
text: 39,
align: "right",
x: 2,
y: -5,
style: {
color: 'black',
fontWeight: "bold",
fontSize: "18px",
}
}
}],
plotBands: [
{
color: 'rgb(204,0,0)',
from: 0,
to: 30.99,
zIndex: 3,
},
{
color: 'rgb(226,113,113)',
from: 31,
to: 44.99,
zIndex: 3,
},
{
color: 'rgb(247,209,34)',
from: 45,
to: 54.99,
zIndex: 3,
},
{
color: 'rgb(136,207,136)',
from: 55,
to: 68.99,
zIndex: 3,
},
{
color: 'rgb(68,180,68)',
from: 69,
to: 87.99,
zIndex: 3,
},
{
color: 'rgb(0,153,0)',
from: 88,
to: 100,
zIndex: 3,
}
],
},
series: [{
dataLabels: {
color: "white",
verticalAlign: "bottom",
crop: false,
style: {
fontWeight: "Normal"
}
},
data: [{
y: 85,
color:'red',
dataLabels: {
formatter(){
return '<span style="font-size:11px;">A</span>';
},
y:-20
}
}, {
y: 72,
color:'green',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">B</span>';
},
y:-15
}
}, {
y: 83,
color:'blue',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">C</span>';
},
y:-15
}
}],
showInLegend: false
}]
});
The simplest solution is to create another y-axis and move plot bands to it:
yAxis: [{
...,
plotLines: [...],
}, {
...,
plotBands: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/agq6ebjd/
API Reference: https://api.highcharts.com/highcharts/yAxis
Hi I am trying gauge meter in script. I get this code from echarts.com and now I am including this one with asp. In console it doesn't show any error but it is not showing?
Hope I will get good answer from you friends.
<script>
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
timeTicket = setInterval(function() {
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
}, 2000)
clearInterval(timeTicket);
And the html code is
<canvas id="mychart"></canvas>
I don't know which version of eCharts you are trying to use, but for my example I'm using a 4.1.
I think you forgot the init method (echarts.init(...)) that is shown in eCharts documentation, at least in your code here you are not using it, and when I put it in my example, it works.
Also, I don't know why you are using a setInterval(), but for now, I removed it.
I also choose to use a div instead of a canvas to render the gauge, it appears better in my screen.
The options object I let the same as you.
Check below to see it working.
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
let myChart = echarts.init(document.getElementById('mychart'));
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
#mychart{
width: 350px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js"></script>
<div id="mychart"></div>
In your div, set the width and heigh values.
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/