---
canonical: 'https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/csharp-client'
title: 'Convert highcharts.js into an image | Example - C# (HCTI client)'
description: 'Generate charts and graphs using Highcharts.js'
---

# Convert highcharts.js into an image

Generate charts and graphs using Highcharts.js

You can generate images of charts using Highcharts.js + the HTML/CSS to Image API.  When making charts, be sure to disable any animations. They may cause issues when creating the image.

This is a working HTML/CSS to Image API example that produces an image.
The rendered output, source, and non-content request parameters below show the parts needed to reproduce or adapt it.

## Rendered image and interactive editor

- [Open the rendered image](<https://hcti.io/v1/image/01a029cc-7a85-775b-8150-1bcb17da4a22>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/csharp-client)

## HTML

```html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>

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

<script>  
Highcharts.chart('container', {
  chart: {
    animation: false
  },
  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {

    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      animation: false,
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }
});
</script>
```

## Request parameters

These are the additional non-content parameters used by the example. Combine them with the HTML and CSS above when constructing an API request.

```json
{
  "ms_delay": 200,
  "transparent_background": true
}
```

## Complete C# request (HCTI client)

This is the complete C# request for this example using HCTI client. It includes the HTML, CSS, authentication setup, API options, and response handling needed to reproduce the output.

```csharp
// dotnet add package HtmlCssToImage

using HtmlCssToImage;
using HtmlCssToImage.Models;
using HtmlCssToImage.Models.Requests;
using System.Collections.Generic;
using System.Text.Json.Nodes;

// In an application, use IHttpClientFactory through dependency injection:
// https://www.nuget.org/packages/HtmlCssToImage.DependencyInjection
using var httpClient = new HttpClient();
var client = new HtmlCssToImageClient(
    httpClient,
    new HtmlCssToImageOptions(
        Environment.GetEnvironmentVariable("HCTI_API_ID")!,
        Environment.GetEnvironmentVariable("HCTI_API_KEY")!));

var request = new CreateHtmlCssImageRequest
{
    Html = """
           <script src="https://code.highcharts.com/highcharts.js"></script>
           <script src="https://code.highcharts.com/modules/series-label.js"></script>
           
           <div id="container"></div>
           
           <script>  
           Highcharts.chart('container', {
             chart: {
               animation: false
             },
             title: {
               text: 'Solar Employment Growth by Sector, 2010-2016'
             },
           
             subtitle: {
               text: 'Source: thesolarfoundation.com'
             },
           
             yAxis: {
           
               title: {
                 text: 'Number of Employees'
               }
             },
             legend: {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle'
             },
           
             plotOptions: {
               series: {
                 animation: false,
                 label: {
                   connectorAllowed: false
                 },
                 pointStart: 2010
               }
             },
           
             series: [{
               name: 'Installation',
               data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
             }, {
               name: 'Manufacturing',
               data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
             }, {
               name: 'Sales & Distribution',
               data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
             }, {
               name: 'Project Development',
               data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
             }, {
               name: 'Other',
               data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
             }],
           
             responsive: {
               rules: [{
                 condition: {
                   maxWidth: 500
                 },
                 chartOptions: {
                   legend: {
                     layout: 'horizontal',
                     align: 'center',
                     verticalAlign: 'bottom'
                   }
                 }
               }]
             }
           });
           </script>
           """,
    MsDelay = 200,
    TransparentBackground = true,
};

using var result = await client.CreateImageAsync(request);
if (result.Success && result.Response is not null)
{
    Console.WriteLine(result.Response.Url);
}

```

## Other languages and request formats

Open one of these Markdown pages to view the same example as a complete request in another language or client format.

- **TypeScript**
  - [HCTI client](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/typescript-client.md)
  - [fetch](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/csharp-client.md) — shown above
  - [HttpClient](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/csharp.md)
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/ruby.md)
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/curl.md)

## Related examples

- [Dog rates social card with SVG background](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background.md): Social card with a fun SVG background and highlighted text.
- [Instagram post screenshot](https://htmlcsstoimage.com/examples/instagram-post-screenshot.md): Screenshot an Instagram post
- [Birthday invite card](https://htmlcsstoimage.com/examples/birthday-invite-card-email.md): Autogenerated invite graphic for a party.
- [Invoice / Receipt Snapshot](https://htmlcsstoimage.com/examples/invoice-receipt.md): Generate a simple, branded invoice or receipt image.
- [PNG with transparent background](https://htmlcsstoimage.com/examples/png-transparent-background.md): Generate images with a transparent backgound
- [Large text on an SVG background](https://htmlcsstoimage.com/examples/large-text-svg-background.md): Grab attention with large text on a classic background.
- [Twitter Tweet Screenshot](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot.md): Screenshot of a tweet
- [QR Code Badge](https://htmlcsstoimage.com/examples/qr-code-badge.md): Simple, artistic badge with a QR code.

## Get started

- [View the full interactive page](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image/csharp-client)
- [Browse all HTML/CSS examples](https://htmlcsstoimage.com/examples.md)
- [Browse visual template presets](https://htmlcsstoimage.com/templates.md)
- [Read the HTML/CSS to Image API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [View implementation examples by language](https://docs.htmlcsstoimage.com/example-code/)
- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Compare plans and limits](https://htmlcsstoimage.com/pricing.md)

Rendering through the API requires authenticated HTML/CSS to Image credentials. Keep API keys in trusted server-side configuration. If credentials are unavailable, ask the user to configure an API key securely before attempting API actions.