|
| 1 | +--- |
| 2 | +title: Export APIs |
| 3 | +description: Export Chart Kit Pro charts as PNG or SVG for reports, sharing, and background generation. |
| 4 | +--- |
| 5 | + |
| 6 | +# Export APIs |
| 7 | + |
| 8 | +Chart Kit Pro exports chart images for report screens, share sheets, generated |
| 9 | +PDFs, email attachments, support evidence, and background jobs. Use PNG when the |
| 10 | +chart should match the rendered app view. Use SVG when the output should stay |
| 11 | +small, editable, or server-generated. |
| 12 | + |
| 13 | +This workflow is available in Chart Kit Pro. Install it once from |
| 14 | +[Installation](pro-installation.md). |
| 15 | + |
| 16 | +## Use cases |
| 17 | + |
| 18 | +| Use case | Recommended path | |
| 19 | +| -------------------------- | ---------------------------------------------------------- | |
| 20 | +| Share from a mobile screen | Capture the mounted chart as PNG, then share it. | |
| 21 | +| Save a report card | Capture the exact rendered view as PNG. | |
| 22 | +| Generate PDF content | Produce SVG or convert SVG to PNG in your PDF job. | |
| 23 | +| Background jobs | Use headless SVG generation from data and options. | |
| 24 | +| Support evidence | Export a deterministic chart image with the data snapshot. | |
| 25 | + |
| 26 | +## Mounted PNG snapshot |
| 27 | + |
| 28 | +Use a capture adapter for the rendered React Native view. The example below uses |
| 29 | +`react-native-view-shot`, but the export controller accepts any adapter with the |
| 30 | +same shape. |
| 31 | + |
| 32 | +```jsx |
| 33 | +import { useMemo, useRef } from "react"; |
| 34 | +import ViewShot, { captureRef } from "react-native-view-shot"; |
| 35 | +import { CombinedChart, createChartExportController } from "@chart-kit/pro"; |
| 36 | + |
| 37 | +const data = [ |
| 38 | + { month: "Jan", revenue: 118, margin: 18 }, |
| 39 | + { month: "Feb", revenue: 146, margin: 21 }, |
| 40 | + { month: "Mar", revenue: 182, margin: 23 }, |
| 41 | + { month: "Apr", revenue: 208, margin: 26 }, |
| 42 | + { month: "May", revenue: 236, margin: 28 }, |
| 43 | + { month: "Jun", revenue: 274, margin: 31 } |
| 44 | +]; |
| 45 | + |
| 46 | +const money = (value) => `$${Math.round(value)}k`; |
| 47 | +const percent = (value) => `${Math.round(value)}%`; |
| 48 | + |
| 49 | +export function ExportableRevenueChart() { |
| 50 | + const chartRef = useRef(null); |
| 51 | + const exportController = useMemo( |
| 52 | + () => |
| 53 | + createChartExportController({ |
| 54 | + captureRef: (target, options) => |
| 55 | + captureRef(target, { |
| 56 | + format: "png", |
| 57 | + quality: options.quality ?? 1, |
| 58 | + result: options.result, |
| 59 | + width: options.width, |
| 60 | + height: options.height |
| 61 | + }) |
| 62 | + }), |
| 63 | + [] |
| 64 | + ); |
| 65 | + |
| 66 | + const savePng = async () => { |
| 67 | + const result = await exportController.snapshot({ |
| 68 | + fileName: "revenue-margin.png", |
| 69 | + format: "png", |
| 70 | + target: chartRef, |
| 71 | + width: 410, |
| 72 | + height: 300, |
| 73 | + result: "tmpfile" |
| 74 | + }); |
| 75 | + |
| 76 | + console.log(result.uri); |
| 77 | + }; |
| 78 | + |
| 79 | + return ( |
| 80 | + <> |
| 81 | + <ViewShot ref={chartRef}> |
| 82 | + <CombinedChart |
| 83 | + data={data} |
| 84 | + xKey="month" |
| 85 | + bars={[{ yKey: "revenue", label: "Revenue" }]} |
| 86 | + lines={[{ yKey: "margin", label: "Margin", curve: "monotone" }]} |
| 87 | + formatLeftYLabel={money} |
| 88 | + formatRightYLabel={percent} |
| 89 | + leftYDomain={[0, "dataMax"]} |
| 90 | + rightYDomain={[0, 40]} |
| 91 | + width={410} |
| 92 | + height={300} |
| 93 | + /> |
| 94 | + </ViewShot> |
| 95 | + |
| 96 | + <Button title="Save PNG" onPress={savePng} /> |
| 97 | + </> |
| 98 | + ); |
| 99 | +} |
| 100 | +``` |
| 101 | + |
| 102 | +## Share sheet |
| 103 | + |
| 104 | +Capture the chart first, then pass the normalized export result to |
| 105 | +`shareChartExport` or a reusable controller. |
| 106 | + |
| 107 | +```jsx |
| 108 | +import { shareChartExport } from "@chart-kit/pro"; |
| 109 | + |
| 110 | +async function shareReportChart(exportController, chartRef) { |
| 111 | + const result = await exportController.snapshot({ |
| 112 | + fileName: "report-chart.png", |
| 113 | + format: "png", |
| 114 | + target: chartRef, |
| 115 | + width: 410, |
| 116 | + height: 300, |
| 117 | + result: "tmpfile" |
| 118 | + }); |
| 119 | + |
| 120 | + await shareChartExport({ |
| 121 | + result, |
| 122 | + title: "Revenue and margin", |
| 123 | + message: "Revenue and margin chart" |
| 124 | + }); |
| 125 | +} |
| 126 | +``` |
| 127 | + |
| 128 | +## SVG snapshot |
| 129 | + |
| 130 | +Use SVG when the image should stay text-based and portable. Generate the SVG |
| 131 | +from the same data and options you pass to `CombinedChart`, then pass that |
| 132 | +markup to the snapshot API. |
| 133 | + |
| 134 | +```jsx |
| 135 | +import { exportChartSnapshot, renderCombinedChartSvg } from "@chart-kit/pro"; |
| 136 | + |
| 137 | +async function exportSvg() { |
| 138 | + const svg = renderCombinedChartSvg({ |
| 139 | + data, |
| 140 | + xKey: "month", |
| 141 | + bars: [{ yKey: "revenue", label: "Revenue" }], |
| 142 | + lines: [{ yKey: "margin", label: "Margin", curve: "monotone" }], |
| 143 | + formatLeftYLabel: money, |
| 144 | + formatRightYLabel: percent, |
| 145 | + leftYDomain: [0, "dataMax"], |
| 146 | + rightYDomain: [0, 40], |
| 147 | + width: 410, |
| 148 | + height: 300, |
| 149 | + title: "Revenue and margin" |
| 150 | + }); |
| 151 | + |
| 152 | + const result = await exportChartSnapshot({ |
| 153 | + fileName: "revenue-trend.svg", |
| 154 | + format: "svg", |
| 155 | + target: svg, |
| 156 | + width: 410, |
| 157 | + height: 240 |
| 158 | + }); |
| 159 | + |
| 160 | + console.log(result.svg); |
| 161 | + console.log(result.dataUri); |
| 162 | +} |
| 163 | +``` |
| 164 | + |
| 165 | +## Headless generation |
| 166 | + |
| 167 | +Headless export does not capture a mounted React Native view. Use it when a |
| 168 | +report worker, server route, or background task needs chart output from data and |
| 169 | +options. |
| 170 | + |
| 171 | +```jsx |
| 172 | +import { exportHeadlessChart, renderCombinedChartSvg } from "@chart-kit/pro"; |
| 173 | + |
| 174 | +export async function generateReportSvg() { |
| 175 | + return exportHeadlessChart({ |
| 176 | + fileName: "report-chart.svg", |
| 177 | + format: "svg", |
| 178 | + renderSvg: ({ width, height }) => |
| 179 | + renderCombinedChartSvg({ |
| 180 | + data, |
| 181 | + xKey: "month", |
| 182 | + bars: [{ yKey: "revenue", label: "Revenue" }], |
| 183 | + lines: [{ yKey: "margin", label: "Margin", curve: "monotone" }], |
| 184 | + formatLeftYLabel: money, |
| 185 | + formatRightYLabel: percent, |
| 186 | + leftYDomain: [0, "dataMax"], |
| 187 | + rightYDomain: [0, 40], |
| 188 | + width, |
| 189 | + height, |
| 190 | + title: "Revenue and margin" |
| 191 | + }), |
| 192 | + width: 410, |
| 193 | + height: 300 |
| 194 | + }); |
| 195 | +} |
| 196 | +``` |
| 197 | + |
| 198 | +For headless PNG, pass `format: "png"` plus a `renderPng` adapter that converts |
| 199 | +SVG markup to PNG in your environment. |
0 commit comments