Kendo UI Plotband to draw horizontal lines - plot

I'm trying to create a chart with 2 horizontal lines using kendo, in order to draw those 2 lines, I'm using plotBands in the valueAxes.
I wish to draw the lines at the values warningMax and warningMin, the problem is that the values of them could be 3k or 350k, is there a way to adjust the thickness of the lines and place a min value in the axis to make sure that when values of series are too small, at least the red line would show at the top?
$("#DivId").kendoChart({
theme: 'bootstrap',
title: {
text: "Title Name",
font: "bold 24px Arial,Helvetica,sans-serif",
color: "black"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line",
style: "smooth",
labels: {
visible: false,
format: "{0:c}"
},
},
series: data.series,
valueAxes: [{
name: "axesName1",
plotBands: [
{
from: warningMax,
to: warningMax + 50,
color: "green"
},
{
from: WarningMin,
to: WarningMin + 50,
color: "red"
}
],
title: { text: "Axes Name1" },
labels: {
format: "n0"
},
color: "#428bca" // Dark Blue
}, {
name: "axesName2",
title: { text: "Axes Name2" },
labels: {
format: "p2"
},
color: "#5cb85c" // Green
}],
categoryAxis: {
categories: data.categories,
axisCrossingValues: [0, 31],
majorGridLines: {
visible: false
},
labels: {
rotation: "auto"
}
}
});

Related

React Chart 2 only draw chart with gray background on production build

I am trying to create line chart with react-chart-2 and NextJs, and it seems to work fine on development.
But when I build project, I only got line chart with gray background. It very bad, how can I fix it. Thanks
What I want to get:
What I want to get
But what I really get:
What I really get
My code:
config = {
data: {
datasets: [
{
data: data ? data : [],
borderColor: '#ff0000',
borderWidth: 1,
radius: 0,
},
],
},
// text color "#fff"
Text: {
style: {
color: '#fff',
},
},
options: {
animation: false,
interaction: {
intersect: false,
},
plugins: {
legend: false,
},
scales: {
x: {
type: 'linear',
grid: {
display: false,
// borderColor: '#fff',
},
ticks: {
display: false,
},
},
y: {
grid: {
display: false,
borderColor: '#fff',
},
ticks: {
display: false,
},
},
},
},
},
My component:
<Line
options={config.options as any}
data={config.data as any}
/>

Setting individual color for each part of Box Plot in Highchart

I would like to have top of the box and bottom of the box in different colors, and also top of the whisker and bottoom of the whisker in different color for each box (region).
But all of the lines in the box are in the same color (red) and top and bottom of the whisker are in the same color (green)
Live demo with steps to reproduce
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'All Patients'
},
legend: {
enabled: true
},
xAxis: {
categories: ['Asia Pacific', 'Europe', 'Latin America', 'North America', 'SWAC'],
title: {
text: ' '
}
},
yAxis: {
title: {
text: 'Annual Center Volume 2016'
},
tickInterval: 5,
min: 0,
max: 75
//plotLines: [{
// value: 932,
// color: 'red',
// width: 1,
// label: {
// text: 'Theoretical mean: 932',
// align: 'center',
// style: {
// color: 'gray'
// }
// }
//}]
},
plotOptions: {
boxplot: {
fillColor: '#F0F0E0',
lineWidth: 2,
upperQuartileColor: 'green',
lowerQuartileColor: 'green',
medianColor: '#0C5DA5',
medianWidth: 3,
stemColor: '#A63400',
stemDashStyle: 'solid',
stemWidth: 1,
whiskerColor: '#3D9200',
whiskerLength: '20%',
whiskerWidth: 3
}
},
series: [{
name: 'Region Runs',
showInLegend: false,
color: 'red',
data: [
[2, 4, 18, 43, 53],
[5, 9, 16.5, 32, 52],
[1, 3, 6, 11.5, 21],
[3, 9, 20, 38, 73],
[1, 2, 8, 16, 20]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: '75th Percentile',
type: 'line',
color: 'red',
marker: {
symbol: 'square'
},
},
{
name: 'Median',
type: 'line',
color:'#0C5DA5',
marker: {
symbol: 'square'
},
},
{
name: '25th Percentile',
type: 'line',
color: 'red',
marker: {
symbol: 'square'
},
},
{
name: '90th percentile',
type: 'line',
color: '#3D9200',
marker: {
symbol: 'square'
},
},{
name: '10th percentile',
type: 'line',
color: '#3D9200',
marker: {
symbol: 'square'
},
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Box Plot Charts -->
<div id="pdfContentHolder" style="margin:auto; width: 720px; height: 800px;">
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto" >
</div>
</div>
https://jsfiddle.net/hew8nq5u/
Thanks in advance guys!
Currently it's not possible in Highcharts to have box bottom and top in different colors. Same with top and bottom whiskers. Here is an explanation and enhancement proposition from github issue (https://github.com/highcharts/highcharts/issues/6796):
Currently each box is a single SVG shape and a border is applied by
stroke parameter which cannot be "separated" for smaller edges. As a
result, you can apply only single color.
Your goal requires a rebuild core of boxplot, so we cannot threat it
as a bug, but feature request.

Applying Striped Colors (Pattern) on pie chart extjs

How to apply striped combination of pattern color in pie chart in ExtJs.
Try this :
new Ext.Panel({
width: 400,
height: 400,
title: 'Pie Chart with Legend - Favorite Season',
renderTo: 'container',
items: {
store: store,
xtype: 'piechart',
dataField: 'total',
categoryField: 'season',
series: [{
style: {
colors: ["#ff2400", "#94660e", "#00b8bf", "#edff9f"]
}
}],
extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
}
}
});
Reference : http://jlorenzen.blogspot.in/2010/10/how-to-change-extjs-piechart-colors.html.
You can add more details, what do you want? Is it your requirement?

base chart slice color on series value?

Right now I'm using a custom palette to display warning level counts in a pie chart. However, occasionally an alarm comes in with an unexpected severity which messes up the colors. I would like to set up some CSS classes like warningPie, criticalPie or minorPie with orange, red and yellow respectively. Then, I'd like to use the series label text to apply the class.
I don't see anything in the dxchart documentation that would make this possible. Does anyoe have any ideas?
Here is my full chart code if anyone is curious.
dxPieChart: {
dataSource: fieldValueCount(['severity']),
palette: ['#CC3300', '#FF9900', '#FFFF00', '#33CC33', '#0066FF'],
animation: true,
legend: {
backgroundColor: '#FCFCFC',
border: {
color: 'black',
width: .5,
visible: true,
cornerRadius: 10
},
visible: false
},
series: [{
type: 'doughnut',
argumentField: 'severity',
valueField: 'count',
label: {
visible: false,
font: {
size: 12,
color: 'black'
},
radialOffset: -15,
backgroundColor: 'rgba(0,0,0,0)',
connector: {
visible: false,
width: 0.5
},
position: 'inside',
customizeText: function(arg) {
globalTest = arg;
return arg.value + ' (' + arg.percentText + ')';
}
},
border: {
color: 'black',
width: .5,
visible: true
},
hoverStyle: {
border: {
color: 'black',
width: .5,
visible: true
}
}
}],
tooltip: {
enabled: true,
color: 'cornflowerblue',
font: {
size: 14
},
customizeText: function(arg) {
globalTest = arg;
var content = arg.argumentText + '<br>' + arg.value + ' (' + Math.round(arg.percent * 100) + '%)';
return content
}
},
title: {
text: ' ',
font: { size: 14 },
horizontalAlignment: 'center'
}
}
You can use customizePoint and customizeLabel options in the pie chart.

HighCharts-Removing the padding for a bar chart

I am constructing a progress-bar using bar chart(with percentage stacking) and would like to remove the spaces/padding in the container and keep only the bar without any padding/margin spaces in the chart container.
Is there a way of accomplishing this?
Fiddle
Code:
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
legend: {
enabled: false,
},
title: {
text: ''
},
xAxis: {
lineWidth: 0,
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
yAxis: {
min: 0,
title: {
text: ''
},
lineWidth: 0,
gridLineWidth:0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
stacking: 'percent'
},
series: {
pointPadding: 0,
groupPadding: 0,
}
},
series: [{
name: 'max',
data: [40],
color: 'white'
}, {
name: 'current',
data: [60],
color: 'green'
}]
});
});
});
You can simple remove margins:
chart: {
renderTo: 'container',
....
margin: 0
}
See: http://jsfiddle.net/gRYGn/4/

Resources