CODEWITHSUNDEEP
highchartsdotnethighcharts
Bob N
Bob N

Reputation: 23

Highcharts download in my application is not the same as what is in JSFiddler tool using the same JSON output

I have a JSON output that I call using Highcharts.Chart(). When I choose Download PNG from my download options, the resulting PNG file shows the chart correctly but text for each option of the legend ends up overlapping the other options.

I have put the JSON that comes from my application into JSFiddler.net and run the Download PNG option and the downloaded PNG shows as expected with no issues with my legend and footer.

I am including my JSON that I put into JSFiddler.net

Here is the Javascript section

const chartOptions = {
  chart: {
    height: 370,
    width: null,
    renderTo: "chartbody_1",
    type: "column",
    alignTicks: true,
  },
  title: { text: "Rapid Report" },
  credits: { enabled: false },
  plotOptions: {
    column: { stacking: "normal", minPointLength: 3 },
    line: {
      minPointLength: 3,
      dataLabels: { enabled: true },
      enableMouseTracking: false,
    },
    pie: {
      innerSize: 100,
      depth: 45,
      allowPointSelect: true,
      cursor: "pointer",
      dataLabels: {
        enabled: true,
        format: "{point.name}: {point.percentage:.1f} %",
        style: { color: "black" },
      },
    },
  },
  lang: { downloadTitle: "Download Chart" },
  tooltip: {},
  xAxis: {
    labels: { rotation: -45 },
    categories: ["Jul/Aug", "Jul/Aug", "Jul/Aug"],
  },
  series: [
    {
      name: "Paid Subscriptions - Print",
      data: [22163072],
      dateComment: ["Last Updated: Aug 07 2024"],
    },
    {
      name: "Verified Subscriptions - Print",
      data: [36301],
      dateComment: ["Last Updated: Aug 07 2024"],
    },
    {
      name: "Ratebase",
      data: [21500000],
      dateComment: ["Last Updated: Aug 07 2024"],
      type: "spline",
      yAxis: 0,
    },
  ],
  yAxis: [
    { title: { text: "" }, min: 0, style: { color: "#2caffe" } },
    { title: { text: "" }, min: 0, style: { color: "#544fc5" } },
    {
      title: { text: "" },
      min: 0,
      style: { color: "#00e272" },
      opposite: true,
    },
  ],
  subtitle: {
    text: "Source: Alliance for Audited Media.  Reporting Period: ending 31 Dec, 2024",
    floating: false,
    crop: false,
    align: "left",
    x: 10,
    verticalAlign: "bottom",
    y: 20,
    style: { color: "black" },
  },
  exporting: {
  scale: 1,
  },
}

Highcharts.chart("container", chartOptions)

Here is the HTML Section

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

My application uses code.highcharts.com/highcharts.js and https://code.highcharts.com/modules/exporting.js so I'm assuming it's not an issue with the Javascript files.

Here are the download PNG files

Downloaded PNG from JSFiddler

Downloaded PNG from my application

You can see the legend text in the image from my application overwrites the other legend text entries.

If anyone has any ideas I'd greatly appreciate it.

Thanks!

Upvotes: 0

Views: 28

Answers (0)

Related Questions