I am using kendo ui to make an area chart.
http://docs.telerik.com/kendo-ui/dataviz/chart/chart-types/area-charts
I am trying to add a stroke to each series but I am not seeing the results
here is my code:
series: [{
name: "vendor0",
data: v0,
color: "green",
stroke: {
color: "black",
width: 3
}
}, {
name: "Vendor 1",
data: v1
}, {
name: "Vendor 6",
data: v6
}],
Any advice on how to get that stroke, below is a screenshot of my work, and you can see how inline it says stroke = none
here is an image of desired effect:
Related
Thanks for the help in advance. I am using apache echarts for my react project. In it, I have a vertically center aligned y-axis label. I want to change its color and font family.The screenshot of my issue
Code I tried
yAxis: [
{
type: "value",
name: "(x1000)",
nameLocation: "middle",
nameGap: 50,
axisLabel: {
textStyle: {
color: "red",
},
},
},
],
but it changed the color of 0,0.2,0.4 etc values. I don't want that to change that but only the (x1000) label. Can anyone help me to solve this issue
try this config:
yAxis: [
{
type: "value",
name: "(x1000)",
nameLocation: "middle",
nameGap: 50,
nameTextStyle: {
color: "red",
fontFamily: "sans-serif"
},
},
],
I create a high chart using angular 4 and I want to highlight a particular portion of Highchart.
Ex Image :https://www.screencast.com/t/MHxo59j2dM
As per above image if data point value goes below to some limit (like 0) then highlight with "Red" color and if it goes below 8 then highlight with Yellow
I'm not sure whether its possible with Highchart or not but if someone had created this kind of features then please let me know.
Highchart provides Area Chart option - https://www.highcharts.com/demo/area-negative but my chart is normal and I don't want to highlight all series point.
There's no such functionality in Highcharts, but you can mimic it by using polygon series and plot lines:
var chart = Highcharts.chart('container', {
plotOptions: {
polygon: {
showInLegend: false
}
},
yAxis: {
tickInterval: 1,
plotLines: [{
value: 4,
color: 'orange',
width: 2
}, {
value: 3,
color: 'red',
width: 2
}]
},
series: [{
data: [6, 4, 3, 1, 2, 3, 4, 7]
}, {
type: 'polygon',
data: [[1,4], [2, 4], [2,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[5,4], [6, 4], [5,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[2,3], [5, 3], [4,2], [3,1], [2,3]],
color: 'red'
}]
});
Live working example: http://jsfiddle.net/kkulig/fbomb7cf/
It will require some programming to make the process of creating these areas automatic (in my fiddle everything is hard-coded).
To achieve similar styling you can try patter fill Highcharts plugin: https://www.highcharts.com/blog/extension/pattern-fill/
API references:
http://api.highcharts.com/highcharts/series.polygon
http://api.highcharts.com/highcharts/yAxis.plotLines
I'm trying to figure out how to make a dynamic bar chart using CanvasJs.
The basic set up for the chart is as follows:
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "Basic Column Chart - CanvasJS"
},
animationEnabled: false, // change to true
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
My goal is to use a simple variable to update the dataPoints instead of static numbers such as 10,15, 25.
User's will input numbers and the chart should update based on their input.
Is this possible to do? Setting "Y" to a variable breaks the chart thus far. I'm unsure how to make this work.
I've also tried setting var input = $('input').html
and setting y as input but it does not work.
Thanks!
If anyone else is trying to figure this out here is how this is handled:
Use variable to assign data points in creating CanvasJS graph?.
This also works with Charts.JS.
Sounds odd but I have these 3 charts in a single chart.
The problem is that if I use showInLegend:true to each series then I have 9 items in legend.
I want to display Urban, Rural, Nothing just one time each.
Here is my code:
http://jsfiddle.net/HpdwR/1298/
series: [{
data: [{
name: 'Urban',
color: 'red',
y: 4
}, {
name: 'Nothing',
color: 'blue',
y: 2
}, {
name: 'Rural',
color: 'green',
y: 4,
}],
size: '130px',
innerSize: '115px',
center: ['12%'],
name: 'first',
showInLegend: true
}, {
data: [{
color: 'red',
y: 1
}, {
color: 'blue',
y: 4
}, {
color: 'green',
y: 5
}],
size: '130px',
innerSize: '115px',
center: ['50%'],
name: 'second',
showInLegend: true
}, {
data: [{
color: 'red',
y: 6
}, {
color: 'blue',
y: 2
}, {
color: 'green',
y: 2
}],
size: '130px',
innerSize: '115px',
center: ['88%'],
name: 'third',
showInLegend: true
}]
I couldn't find an elegant way to do this, or a built-in solution (maybe there is one, but I couldn't find it...)
Here's a hack that hides the extra legends, and links the hover event. I've disabled the click events for simplicity.
// Legend Hack
$('g.highcharts-legend-item:nth-child(n+4)').css('visibility', 'hidden');
$('g.highcharts-legend-item').hover(function() {
var i = $(this).index();
$('g.highcharts-legend-item').eq(i+3).trigger('mouseover');
$('g.highcharts-legend-item').eq(i+6).trigger('mouseover');
}, function() {
var i = $(this).index();
$('g.highcharts-legend-item').eq(i+3).trigger('mouseout');
$('g.highcharts-legend-item').eq(i+6).trigger('mouseout');
});
$('g.highcharts-legend-item *').click(function() { return false; });
Fiddle: http://jsfiddle.net/HpdwR/1303/
I believe that the best option here would hide the extra legends so only one of them will be displayed. In order to have the control over the other charts with the displayed legend (that is currently controlling only one chart), you should write an event listener when clicking on the legend and ask it to have effect on the rest of the charts.
HOWEVER, the issue is that "legendItemClick" that is responsible for the event listener on the legend's click event is not working when using the pie chart. Therefore, you should catch it with jquery.. an example can be seen here https://stackoverflow.com/a/16099935/1138430
Is there a way to show the pie chart name on top, bottom, right or left of a pie chart without having to use the labels, like they use in this highcharts demo:
labels: {
items: [{
html: '<b>Total fruit consumption<b>',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
}
The labels have an absolute position in pixels, and for the pies I am using percentages.
When there is a resizing, the labels stay on the same place and the pies move, and I can't get the same relative position in percentage for both.
Example pie:
{ data: [{ color: '#31B7C9', name: 'Slice 1', y: 1266364.92333333 }, { color: '#9ED93E', name: 'Slice 2', y: 7284620.73 }, { color: '#DABF12', name: 'Slice 4', y: 2330663.39333333 }], name: 'Pie Chart Name', type: 'pie', center: ["25%", "25%"], showInLegend: true, size: "20%", dataLabels: { enabled: false }}
Any idea how to get the pie chart name to display as its title?
Example in jsFiddle here.
Thank you in advance
EDIT:
So it looks like you want to have the same chart as in the demo and not just a pie chart. If that is the case my answer below fails. You will need to use labels and position them.
----Keeping below code for future reference---
Yes,
Use the title property.
Example here: http://jsfiddle.net/wergeld/svkmM/
title: {
text: 'A Title!'
}
I found a plugin that allows to show the pie chart titles here.