I am trying to get something like this, where the style of the chart goes from a color on the min value to a color on the max value, and the progress value is in between.
I have this code:
option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [{
name: 'Pressure',
type: 'gauge',
max: 40,
min: -10,
startAngle: 180,
endAngle: 0,
progress: {
show: true,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 1,
y2: 1,
colorStops: [{
offset: 0,
color: "blue"
}, {
offset: 0.25,
color: "blue"
}, {
offset: 0.5,
color: "green"
}, {
offset: 0.75,
color: "orange"
}, {
offset: 1,
color: "red"
}],
global: false // default is false
}
}
},
pointer: {
show: false
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [{
// name of date item
name: 'data1',
// value of date item is 8
value: 10,
},
// {
// name: 'data2',
// value: 40,
// // user-defined label format that only useful for this data item
// label: {},
// // user-defined special itemStyle that only useful for this data item
// itemStyle:{},
// anchor: {
// show: false
// },
// progress: {
// itemStyle: {
// color: 'black'
// }
// },
// title: {
// show: false
// },
// detail: {
// show: false
// },
// }
]
}]
};
Which gives the close to what I want but not really as you can see the range of colors apply up to the current value. To test this paste the code in here:
https://echarts.apache.org/examples/en/editor.html?c=gauge-simple
The result:
Another solution is to draw the entire axis line with this gradient color and cover the right side after the progress value but not sure how to do this.
Related
I have a nested pie chart (two pie chart series, one an outer "doughnut" around the other). The inner pie chart needs to mainly use inner-positioned labels, but sometimes there isn't enough room and they overlap:
How can I get this to not overlap? Is there a way to switch the overlapping labels or those that can't fit inside their slices to be outer-positioned instead? Or some other strategy to make these readable? Using 100% outer positioned labels works, but because of the outer pie chart there isn't much room and it's much harder to read because the outer pie chart also has its own set of outer-positioned labels.
Series def:
seriesOpt = [{
encode: {
value: "value",
itemName: "name"
},
type: "pie",
startAngle: 90,
//minShowLabelAngle: 0.05, // buggy, throws internal javascript error
avoidLabelOverlap: true,
datasetIndex: 0,
name: "inner",
radius: [0, insideRadius??"40%"],
label: {
show: true,
position: "inside"
distanceToLabelLine: 10,
alignTo: "none",
overflow: "truncate",
formatter: '{name|{b}}\n{pct|{d}%}',
rich: {
pct: {
color: '#999'
}
},
labelLine: {
show: false
}
},{
encode: {
value: "value",
itemName: "name"
},
type: "pie",
startAngle: 90,
//minShowLabelAngle: 0.05, // buggy, throws internal javascript error
avoidLabelOverlap: true,
datasetIndex: 1,
name: "outer",
radius: [outsideInnerRadius??"60%",outsideOuterRadius??"75%"],
label: {
show: true,
position: "outside",
distanceToLabelLine: 10,
alignTo: "none",
overflow: "truncate",
formatter: '{name|{b}}\n{pct|{d}%}',
rich: {
pct: {
color: '#999'
}
},
labelLine: {
show: true,
length: 60,
length2: 15
}
}]
You should tweak series-pie.labelLayout.
Here is an example:
const data = [
{
name: 'Foo',
value: 10
},
{
name: 'Bar',
value: 20
},
{
name: 'Baz',
value: 15
},
{
name: 'Qux',
value: 500
}
];
let option = {
series: [
{
type: 'pie',
radius: ['120px', '90px'],
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
labelLayout: {
moveOverlap: 'shiftY' // <--- HERE
}
},
{
type: 'pie',
radius: '42px',
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
labelLine: {
showAbove: true
},
// ========== THERE ==========
labelLayout: {
x: 131,
moveOverlap: 'shiftY'
}
// ====================
}
]
};
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>
I'm trying to use rotated labels in my graph. However, the labels are getting cropped. How can I make more space in the bottom so that the labels can fit?
options = {
xAxis: {
type: "category",
data: axis,
axisLabel: {
show: true,
interval: 0,
rotate: 45,
},
axisTick: {
show: true,
interval: 0
}
},
yAxis: {
type: "value",
data: axis,
min: 1,
minInterval: 1,
maxInterval: 1,
max: 15,
axisTick: {
interval: 1
}
},
series: [
{
type: "bar",
stack: "minmax",
itemStyle: {
normal: {
color: "rgba(0,0,0,0)"
}
},
data: maxs
},
{
type: "bar",
stack: "minmax",
data: mins,
itemStyle: { color: "#63869e" }
},
{
symbolSize: 20,
data: scatter,
type: "scatter",
itemStyle: { color: "black" },
},
]
};
To contain the label you can use:
options = {
grid: {
containLabel: true,
}
}
Space can be added with grid option bottom:
options = {
grid: {
bottom: 100,
}
}
Can someone explain to me how to toggle from light to dark theme without reloading the page??
I have this code that checks if the theme is light or dark and I want to change the theme dynamically base on the theme.
my code so far
initECharts(days: any, hours: any, data: any) {
if (this._chart) {
this._chart.clear();
this._chart = null;
}
// console.log('days: ', this.days);
// console.log('hours: ', this.hours);
// console.log('values: ', this.values);
data = this.reconstructData(days, hours, data);
// const x: any = document.getElementById('main');
const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
console.log('theme', theme);
const domEl: any = this.main.nativeElement;
this._chart = echarts.init(domEl, theme);
// specify chart configuration item and data
const option: any = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
},
nameTextStyle: {
color: 'red'
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// use configuration item and data specified to show chart
this._chart.setOption(option);
}
Ok, I found it.
every time you want to update the theme dynamically example a button or an observable or Promise, you must call this method
echarts.dispose(this._chart);
then you call the initMethod, example:
this.initECharts();
The init method can look like this in my case.
initECharts(days: any, hours: any, data: any) {
data = this.reconstructData(days, hours, data);
// const x: any = document.getElementById('main');
const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
console.log('theme', theme);
const domEl: any = this.main.nativeElement;
this._chart = echarts.init(domEl, theme);
// specify chart configuration item and data
const option: any = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
},
nameTextStyle: {
color: 'red'
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// use configuration item and data specified to show chart
this._chart.setOption(option);
}
I´m trying create a chart with a normal decimal scale on the left and a logarithmic scale on the right side.
the sample shows approximately my result, the only thing missing is that on the scale on the right side I need to present the value of 1000Hz at the exact middle point. (360 line)
function createTympaniHzChart() {
$("#chart5").kendoChart({
title: {
text: "..."
},
series: [{
colorField: "valueColor",
overlay: { gradient: "none" },
border: {
width: 0,
color: ""
},
data: [
{ value: 720, valueColor: "#C60C30" },
{ value: 355, valueColor: "#FFBE25" },
{ value: 340, valueColor: "#2EA1FF" }
]
}],
tooltip: {
visible: true,
format: "{0:0}",
template: "#= value #°"
},
categoryAxis: {
title: {
text: "Lorem Ipsum",
color: "#4D4D4D"
},
majorGridLines: {
visible: false
},
categories: ["A...", "B...", "C..."],
line: {
visible: false
},
axisCrossingValues: [0, 10]
},
valueAxis: [{
title: {
text: "° Insertion Depth",
color: "#4D4D4D"
},
max: 720,
majorUnit: 180,
line: {
visible: false
},
labels: {
format: "{0}°",
position: "start"
}
},
{
title: {
text: "° Pitch (Hz)",
color: "#4D4D4D"
},
max: 10000,
min: 100,
majorUnit:9900,
reverse: true,
line: {
visible: false
},
labels: {
format: "{0}Hz",
position: "end"
}
}
]
});
}
Is there any other way to add this value?
I manage t solve the issue with a custom function for the data and adding type: "log" property to the valueAxis.
Add this to the valueAxis:
data: fibonacciSequence()
The function:
function fibonacciSequence() {
for (i = 100; i <= 10000; i = i * 10) {
var fibAxisValues = [];
fibAxisValues.push(i);
}
return fibAxisValues;
}
I have data from 10/19 to 11/01 and I am plotting it using a scattered Highcharts plot (v4.1.10, cannot upgrade). For some reason my x-axis is showing 10/18, but I want it to start with 10/19. I tried using pointStart, but this did not work. Any suggestions on how to get the correct starting date to show in my x-axis?
Highcharts.chart('container', {
yAxis: {
gridLineWidth: 0.5,
gridLineColor: '#D6D6D6',
tickInterval: 5,
dashStyle: 'LongDash',
lineColor: '#D6D6D6'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d',
week: '%d/%b',
month: '%b/%y',
year: '%Y'
},
title: {
enabled: true,
text: 'date'
},
gridLineWidth: 0,
lineColor: '#D6D6D6',
lineWidth: 0.5,
startOnTick: true
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: this.toolTip
}
},
chart: {
marginTop: 5,
marginRight: 0,
reflow: false,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
style: {
fontFamily: 'Open Sans'
},
type: 'scatter',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0
},
tooltip: {
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%m/%d %H:%M:%S', this.x)
+ ' - ' + Highcharts.numberFormat(this.y, 2);
return s;
},
},
series: values
});
jsfiddle code here
You can set the x axis min value:
xAxis: {
min:1539950400000
Example: http://jsfiddle.net/jlbriggs/dwnx6o8e/9/
Depending on the data and other options, you may need to look at other properties, like startOnTick, tickInterval, etc.