Something about my env is interfering with Highcharts. I have simplified the code to:
let data = [];
data.push({ name: 'Temperature', data: fake1, color: 'orange', lineColor: 'red' });
Highcharts.stockChart(divId, {
navigator: {
series: {
color: 'orange',
fillColor: 'purple',
lineColor: 'red'
}
},
series: data,
});
The data series is rendered correctly - but with a blue line(s).
The project env is a very complicated DotNet App (not controlled by me) which has Kendo, and plottable and lots of stuff. I have tried commenting out dependencies, no luck.
I can get colors working in a completely standalone env, not in the dot net app. What should I do at this point? I need to control the line colors.
It turns out there are two highstock.js files (same name); one that depends on highcharts.css and one that doesn't. Use the one that doesn't.
Related
I have a chart that works very well when using the data module with Google spreadsheets. However I need to stop using Google sheets and use CSV on my own server instead. Some of my charts are working, but some aren't. Here's one that is not working. It uses the second column to set the point color, but it's not recognizing it. Any idea what might be wrong here? I edited some of the csv entries to try to make it work, but it's not working much:
http://jsfiddle.net/jmunger/cf6L4bmk/20/
var chart = Highcharts.chart('gfx', {
chart: {
type: 'bar',
},
data: {
csv: document.getElementById('csv').innerHTML,
itemDelimiter: ',',
seriesMapping: [{
color: 2,
label: 3
}]
}
});
console.log(chart);
That problem seems to be a bug in a data module, so I reported it here: https://github.com/highcharts/highcharts/issues/13283
As a workround you can use other color formats:
0;1;blue
1;2;rgb(155,155,55)
2;3;red
Live demo: http://jsfiddle.net/BlackLabel/0gjbn4m6/1/
i need to do something, i tried everything but i cannot get what i want.
I have one chart in one container, and at some point a have to render that chart to another div, but without losing the first one, so... i need to duplicate that chart but in a new container.
Im able to get the chart that im refering to, but i need something like getting the options of this chart so i can initialize another chart, with same options but in a different container.
The chart is generated dinamically, so i do not have the options before it is rendered, so the only way i can get the option in order to replicate the chart i getting the options of an already painted chart.
Is there any way to achieve that?
Thank you.
You can use chart.userOptions property to get the options needed to create a second chart:
var chart = Highcharts.chart('container', {
series: [{
type: 'column',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
xAxis: {
max: 10
}
});
$('#duplicate').on('click', function() {
Highcharts.chart('container2', chart.userOptions);
});
Live demo: http://jsfiddle.net/BlackLabel/9q70mvky/
I am saving a a chart as SVG, using the getGSV() method. The chart in question is a rather complex pie chart, that uses formatters to annotate the slices with information. These labels however do not show up in the SVG export, it just contains the unannotated chart. I am aware that by default, exporting HTML in svg is not supported, so i tried enabling the allowHTML option, but my problem remains unsolved.
In the method that assembles the data structure:
"dataLabels": {
style: {
width: '70px',
textAlign: 'right'
},
enabled: true,
useHTML: true, /*already defined in the chart options */
formatter: function()
{console.log(i18next.t("component."+this.point.name+".name")); return
i18next.t("component."+this.point.name+".name") + "<br>" + results[this.point.name]["pie_score"] + "%"},
"distance": -50,
},
and at another point, in the chart definition:
exporting: {
allowHTML: true,
enabled: false
},
The SVG is simply exported via chart.getSVG()...
To clarify, i am merely adding an export pipelin to existing code, so i know the charts themselves work and look as intended, they are only screwed up in the export.
I am trying to export a Pie chart with data labels. I'm using the Phantomjs server side export functionality. I get the chart image back correctly but the datalabels don't show up. The sample data structure in the web version adds the data labels as expected.
Is there specific configuration requited to get the data labels to show up?
I'm on HIghcharts 4.0.1
The JSON I'm sending over to the phantom server is:
{"infile":"{ legend: {enabled: false},chart: {borderWidth: 0},colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],credits: {text:'CannLabs'},title: {text: 'Potency results'},plotOptions: {pie: {dataLabels: {enabled: true,color: 'black',format: '<b>{point.name}</b>: {point.percentage:.1f} %'}}},series: [{type: 'pie',name: 'Potency Results',data: [{name: 'CBD-V', y: 0.00},{name:'CBD-A',y: 0.00},{name:'CBG',y: 0.00},{name:'CBD',y: 0.01},{name:'THC-V',y: 0.00},{name:'CBN',y: 0.01},{name:'THC',y: 0.87},{name:'CBC',y: 0.02},{name:'THC-A',y: 0.00}]}]};"}
This appears to be a bug in the 4.0.1 version of highcharts. I upgraded to the master version of the highcharts.js file and the labels are now rendered correctly.
If the accepted answer above doesn't help you, try adding animation: false to your series configuration, like so:
plotOptions: {
series: {
animation: false
}
},
I'm seeing this error when I create a line chart with a single y-axis.
Uncaught TypeError: Cannot read property 'series' of undefined highcharts.3.0.1.js:147
It seems that the series is a bit displaced to the left. The leftmost tool tip is hanging off the chart where the y-axis names are showing. All the tooltips are off a bit and if I mouse all the way to the right of the chart I see this error over and over in the console.
Interestingly, if I zoom in and then hit the 'reset-zoom' the chart renders properly and the problem goes away.
unfortunately, creating a fiddle will be hard as I build my config options on the fly. I am using addSeries to add my series to an empty chart once it has been displayed.
Thanks in advance for any help or tips.
-Dale
In general, without code it is really hard to find issue, just copy your 'options on the fly' which reproduce issue, please.
However, most probably you are trying to add series for axis, which doesn't exists. For example:
yAxis: { },
series: [{ yAxis: 1 }] <-- obviously there is only one yAxis
export class xyzComponent implements OnInit {
highcharts = Highcharts;
chart;
chartCallback;
title = 'myHighchart';
chartConstructor = "chart";
chartOptions: {};
ngOnInit() {
this.chartOptions = {
chart: {
type: "spline"
},
title: {
text: 'Average Vegetation and Soil Moisture Index'
},
}
}
}
it's for Angualar