I have an Apex Chart with multiple lines, I would like to fill the area between each line with a specific colour. Is that possible?
I searched the documentation and it mentions the "fill" option which only seems to fill everything below a line and furthermore doesn't seem to work at all if I try to add it to my line chart.
Options:
const options = {
chart: {
type: 'line'
},
colors: ["#000000", "#115F66", "#AEC6C8", "#EE7E66", "#115F66", "#AEC6C8"],
xaxis: {
type: 'datetime',
categories: xLabels,
tickAmount: xLabels.length,
},
yaxis: {
decimalsInFloat: 0,
min: 0,
},
legend: {
show: false,
},
series: [
{
name: 'Main',
data: this.plotting_data.historicalData,
},
{
name: 'First Lower Bound',
data: this.plotting_data.lowerPred1,
},
{
name: 'Second Lower Bound',
data: this.plotting_data.lowerPred2,
},
{
name: 'Middle',
data: this.plotting_data.prediction,
},
{
name: 'First Upper Bound',
data: this.plotting_data.upperPred1,
},
{
name: 'Second Upper Bound',
data: this.plotting_data.upperPred2,
},
],
}
Range Area Charts are currently not supported in ApexCharts (as of v3.8.5).
Related
I want to put time data in x-axis labels in vue chart.js . There is a way in pure js code, not vue, but I can't find it in vue version.
Below is my code.
export default {
name: "LineChart",
components: {
LineChartGenerator,
},
props: {
chartId: {
type: String,
default: "line-chart",
},
datasetIdKey: {
type: String,
default: "label",
},
width: {
type: Number,
default: 100,
},
height: {
type: Number,
default: 280,
},
cssClasses: {
default: "",
type: String,
},
styles: {
type: Object,
default: () => {},
},
plugins: {
type: Array,
default: () => [],
},
},
data() {
return {
chartData: {
labels: "???",
datasets: [
{
label: "vacuum",
backgroundColor: "#534e7f",
data: this.$store.state.cnc1,
},
],
},
chartOptions: {
maintainAspectRatio: false,
},
};
},
};
I tried a lot of things similar to the one below but failed.
I also installed the extension but it failed.
scales: {
x: {
type: "time",
time: {
unit: "day",
},
},
},
I want to make something like this.
Most of the vue examples don't help by putting specific values in 'labels:' beforehand.
How can I get the value of the label in real time?
I tried putting time data into the store, but only the time when execution started is displayed.
Or like this...My head is a potato.Any help would be appreciated.
did you match label and data like this?
chartData: {
labels: [ 'January', 'February', 'March'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20, 12]
}
]
},
I'm currently facing the following problem:
I've created a simple line chart and filled it with example data.
But the tooltip doesn't show up.
I've tried using my config on the ECharts Website and there the tooltip is working.
option = {
title: {
text: 'Baum'
},
tooltip: {
trigger: 'item',
show: true,
showContent: true,
alwaysShowContent: true,
triggerOn: 'mousemove',
axisPointer:
{
label: {
show: true,
}
}
},
legend: {
data: ['lain', 'lain2']
},
xAxis:{
type: 'category',
data: ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9', '10'],
boundaryGap: false,
},
yAxis: {
type: 'value'
},
series: [
{
name: 'lain',
type: 'line',
showSymbol: true,
data: [100,199,200,287,345,456,567,600,700,800],
smooth: true
},
{
name: 'lain2',
type: 'line',
showSymbol: true,
data: [111,158,231,296,374,495,596, 650,750,879],
smooth: true
}
],
animationDuration: 2000
}
}
In vue it's implemented like this:
<v-chart :options="option"></v-chart>
The data in the diagram itself is shown properly.
Thanks ahead.
I found a solution.
The import for the tooltip module has to imported explicitly.
import 'echarts/lib/component/tooltip'
With this import it's working.
I am trying to draw line chart. I have data set in form
{
line_1:{
rt:[1,2,3,4,5,6],
int:[2,3,4,5,6,7]
},
line_2:{
rt:[1,2,3,4,5,6],
int:[2,3,4,5,6,7]
}
}
What I have tried:
showChart(){
this.renderChart({
labels: this.data.line_1.rt,
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: his.data.line_1.intensity,
}
]
}, {responsive: true, maintainAspectRatio: false})
}
Now I want "rt" to be at x axis and intensity array of every line is different. I am able to draw a single line but not able to draw multiple.
Here is how my chart component looks like:
<script>
let VueChartJs = require('vue-chartjs');
export default VueChartJs.Line.extend({
props:['data', 'status'],
watch: {
// whenever question changes, this function will run
status: function (newStatus) {
if(newStatus === true){
this.showChart();
}
}
},
methods :{
showChart(){
console.log(this.data);
this.renderChart({
labels: this.data.groups[0]['peaks'][0].eic.rt,
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: this.data.groups[0]['peaks'][0].eic.intensity
}
]
}, {responsive: true, maintainAspectRatio: false})
}
},
mounted () {
}
})
</script>
For multiple lines, you have to add multiple datasets ;)
datasets: [
{
label: 'Line One',
backgroundColor: '#f87979',
data: this.data.groups[0]['peaks'][0].eic.intensity
},
{
label: 'Line two',
backgroundColor: '#f87979',
data: this.data.groups[0]['peaks'][0].eic.intensity
}
]
I am using Kendo Bar Chart, which will show like grouped and stacked for dynamic data. In category field i need to display usernames and it has to show respective metric values, here metric values are dynamic and variable, and metric count values are displayed in bar, which is like stacked bar.
For Example:
Metric values are - High, Low, Medium, ...
Metric values count -> High-4, Low-2, and medium -5 ,..
Here counts 4,2, and 5 to be shown in a stacked bar.
Like this i have to show for multiple users with respective the values.
Below i have shown my Code, may i know how to use dynamic stacked bar kendo chart, and can i have solution for above mentioned problem.
Code- Chart Definition
$("#chartForWorkItems").kendoChart({
title: {
text: "Bugs State Analysis"
},
//defining the datasource for loading the chart
dataSource: {
transport: {
read: {
url: baseUri + "ProjectReportWorkItemChart/chartDisplayForWorkITems",
cache: false,
type: "POST",
dataType: "json",
complete: function (e) {
},
},
parameterMap: function (options, operation) {
console.log(selectedCategoryByMetrics);
if (operation == "read") {
return {
workItems: selectedCategoryByMetrics,
Projectid: sessionStorage.getItem("prjprojectid"),
metricsWithWorkItem: metricsWithWorkItem,
users: usersSelected
}
}
},
},
schema: {
model: {
id: "field",
fields: {
field: { type: "string" },
count_f: { type: "string" },
metric: { type: "string" },
assignedTo: { type: "string" },
}
}
}
},
chartArea: {
width: 400,
height: 300,
},
seriesDefaults: {
type: "column",
},
series: [{
field: "count_f",
},
],
categoryAxis: {
categories: "assignedTo",
field: "field",
majorGridLines: {
visible: true
}
},
valueAxis: [{ //display count in the value axis
line: {
visible: true
},
majorGridLines: {
visible: true
}
}],
tooltip: { //To display tool tip
visible: true
},
});
I am trying to connect a RallyChart using the type specifier set to pie with a Rally.data.custom.Store. When the RallyChart has the type set to column or is blank, the data shows correctly. When the type is set to pie, I get a pie with all 0%s returned.
Here's what my store looks like:
var myStore = Ext.create('Rally.data.custom.Store', {
data: mySeries,
fields: [
{ name: 'WorkItems', type: 'string' },
{ name: 'Count', type: 'int' }
]
});
Here's what my chart configuration function looks like:
_buildChart: function(myStore) {
this.myChart = Ext.create('Rally.ui.chart.Chart', {
height: 400,
store: myStore,
series: [{
type: 'pie',
name: 'Count',
dataIndex: 'Count'
}],
xField: 'WorkItems',
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Work Breakdown in Selected Sprint'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
}
}
});
this.add(this.myChart);
}
My data incoming looks like:
['Defects', 4],
['Feature A', 4]
['Feature B', 4]
Any ideas why column charts can show it, but pie cannot?
I bet this is a bug in the 2.0p5 version of the chart. We just released version 2.0rc1 of the SDK which includes a better version of the chart. The following code example shows how to create a pie with your data and Rally.ui.chart.Chart in 2.0rc1:
//from inside your app
this.add({
xtype: 'rallychart',
height: 400,
chartData: {
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Defects', 4], ['Feature A', 4], ['Feature B', 4]
]
}]
},
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
xAxis: {},//must specify empty x-axis due to bug
title: {
text: 'Work Breakdown in Selected Sprint'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
}
}
});
Note it is no longer necessary to create an intermediate store to pass to the chart- you can simply pass in your series as part of the chartData config.